Невозможно распечатать все содержимое страницы Ionic 3

Предыстория: я пытаюсь напечатать определенную часть ионной страницы, состоящую из длинного списка элементов. Проблема в том, что я не могу распечатать весь список элементов, если он не помещается на одной странице (и нужно прокручивать вниз, чтобы увидеть все элементы).

Я ожидал, что диалоговое окно печати, открывающееся при вызове printPage (), распознает, что следует распечатать несколько страниц, поскольку полный список элементов не умещается на одной странице. Однако в диалоговом окне печати указано, что будет напечатана только одна страница.

Это контент, который я хочу напечатать: (из reports.html)

  <div *ngFor = "let transaction of transactions" >
    <ion-row class = "row--line" padding-bottom>
      <ion-col col-1>
        {{transaction.protocolIdentifier.toUpperCase()}}
      </ion-col>
       ...
    </ion-row>
  </div>

Я использую встроенную функцию печати браузера, которая вызывается из reports.html в reports.ts, при вызове которой автоматически открывается диалоговое окно печати, показывая, что будет напечатана 1 из 1 страниц. (однако должно быть 1 из n страниц)

  public printPage(): void {
    window.print()
  }

Чтобы распечатать только содержимое этого конкретного div, я использую в своем app.scss следующее: (находится в https://github.com/ionic-team/ionic/issues/12002, что связано с моей проблемой)

@media print{
  ion-header{ display: none !important; }
  .colored-background { display: none !important; }
  .dontPrint { display: none !important; }
}

Теперь у меня вопрос, как распечатать столько страниц, сколько требуется, чтобы уместить все содержимое вышеупомянутого div. Обратите внимание, что я разрабатываю приложение для настольных компьютеров, а не для мобильных устройств, используя Ionic 3 *.

let transaction of transaction вы уверены, что оператор цикла верен?
Suraj Rao 18.10.2018 09:27

примечание: в итоге я использовал модуль npm jspdf-autotable для экспорта моих данных в отличную таблицу PDF

Sahadev 23.10.2018 11:12
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
5
2
1 097
2

Ответы 2

Здесь, не могли бы вы изменить * ngFor, как показано ниже?

<div *ngFor = "let transaction of transactions" >

так что ваш код будет похож:

  <div *ngFor = "let transaction of transactions" >
    <ion-row class = "row--line" padding-bottom>
      <ion-col col-1>
        {{transaction.protocolIdentifier.toUpperCase()}}
      </ion-col>
       ...
    </ion-row>
  </div>

Если я не ошибаюсь, это скорее всего проблема с тем, что Ionic не отображает всю страницу в DOM, а только во вьюпорте. Итак, чтобы обойти это, лучший ответ, кажется, - использовать модуль для преобразования вашего HTML в PDF, а затем отправить его на печать.

Выезд: https://www.npmjs.com/package/jspdf-autotable

Другие вопросы по теме