首页 > 解决方案 > 当我在 IONIC3 中有包含许多项目的可滚动内容时无法打印整个页面

问题描述

我使用 Cordova Print Plugin 打印具有可滚动内容的表格。我想从 Android 设备中的打印按钮打印该页面。但是当我这样做时,我只得到一页的内容。

下一页没有显示。

请帮助我。

我已经尝试添加媒体查询。

传入报告.html

<ion-header>

  <ion-navbar>
    <ion-title>{{'Incoming Report' | translate}}</ion-title>
  </ion-navbar>

</ion-header>
<ion-content>

    <ion-row class="button-print">
        <ion-col col-3></ion-col>
        <ion-col col-6 style="text-align: center;"> <button ion-button color='danger' (click)="generatePDF()">Print Report</button></ion-col>  
         <ion-col col-3></ion-col>
         </ion-row>

        <div> ......Here is my content</div>
  </ion-content> 

生成pdf函数

generatePDF(){

  cordova.plugins.printer.print();


}

传入报告.scss

@media print{
                ion-header{ display: none !important; }  
                .button-print{ display: none !important; }



                body, .app-root, .split-pane, .ion-page, ion-app, ion-nav { contain: none; }
                body, ion-nav{ overflow: initial; }
                body{ position: static; }

                ion-content{ overflow-y: visible !important; 

                    position: relative; }
              } 

标签: angularionic-frameworksassionic3

解决方案


推荐阅读