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

2023年10月27日 229次阅读

背景：我正在尝试打印由一长串项目组成的离子页面的特定部分.问题是,一旦它不适合一个页面,我就无法打印整个项目列表(并且必须向下滚动才能看到所有项目).

我希望在调用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>

我正在使用本机浏览器打印功能,该功能在report.ts中调用report.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 *开发桌面应用程序,而非移动设备

最佳答案 在这里,您可以尝试更改* 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>
点赞