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

html – 无法打印Ionic 3页面的全部内容,第1张

概述背景:我正在尝试打印由一长串项目组成的离子页面的特定部分.问题是,一旦它不适合一个页面,我就无法打印整个项目列表(并且必须向下滚动才能看到所有项目). 我希望在调用printPage()时打开的打印对话框能够识别出应该打印多个页面,因为完整的项目列表不适合一页.但是,打印对话框表示只打印一页 这是我要打印的内容:(来自reports.html) <div *ngFor="let transacti 背景:我正在尝试打印由一长串项目组成的离子页面的特定部分.问题是,一旦它不适合一个页面,我就无法打印整个项目列表(并且必须向下滚动才能看到所有项目).

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

这是我要打印的内容:(来自reports.HTML)

<div *ngFor="let transaction of transaction" >    <ion-row  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  padding-bottom>      <ion-col col-1>        {{transaction.protocolIDentifIEr.toupperCase()}}      </ion-col>       ...    </ion-row>  </div>
总结

以上是内存溢出为你收集整理的html – 无法打印Ionic 3页面的全部内容全部内容,希望文章能够帮你解决html – 无法打印Ionic 3页面的全部内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1058390.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存