Предыстория: я пытаюсь напечатать определенную часть ионной страницы, состоящую из длинного списка элементов. Проблема в том, что я не могу распечатать весь список элементов, если он не помещается на одной странице (и нужно прокручивать вниз, чтобы увидеть все элементы).
Я ожидал, что диалоговое окно печати, открывающееся при вызове 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 *.
примечание: в итоге я использовал модуль npm jspdf-autotable для экспорта моих данных в отличную таблицу PDF






Здесь, не могли бы вы изменить * 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
let transaction of transactionвы уверены, что оператор цикла верен?