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

Question

背景:我正在尝试打印一个Ionic页面的一个特定部分，包括一个长长的项目列表。问题是，当整个项目列表不适合在一个页面上时，我就无法打印它(而且必须向下滚动才能看到所有的项目)。

我希望在调用printPage()时打开的print对话框能够识别应该打印多个页面，因为完整的项目列表不适合一页。但是，“打印”对话框指出，将只打印一页。

这是我想要打印的内容：(来自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页将被打印。(但应为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>

Answer 2

如果我没有弄错的话，这可能是一个问题，因为Ionic没有在DOM中呈现整个页面，而只是在viewport中。因此，要解决这个问题，最好的答案似乎是使用一个模块将HTML转换成PDF格式，然后将其发送给打印。

退房：https://www.npmjs.com/package/jspdf-autotable