无法打印Ionic 3页面的全部内容

Question

背景：我正在尝试打印包含大量项目的Ionic页面的特定部分。问题是，一旦页面不适合页面，我就无法打印整个项目列表（而且必须向下滚动才能查看所有项目）。

我希望在调用printPage（）时打开的打印对话框能够识别出应该打印多页，因为项的完整列表不适合一页。但是，“打印”对话框指出仅打印一页

这是我要打印的内容：（来自reports.html）

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

我使用的是本机浏览器打印功能，该功能是从reports.ts中的reports.html调用的，调用此功能后会自动打开打印对话框，显示将打印1页中的1页。（但是应该是n页中的1页）

  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 *开发桌面应用程序，而不是移动设备

Answer 1

在这里，你可以尝试如下更改 *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>