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吗？

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        tableView.reloadData()
    }


    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {


    }

}

所以您的代码应该是;

<div *ngFor="let transaction of transactions" >

Answer 2

如果我没记错的话，这可能是Ionic仅在视口中无法在DOM中渲染整个页面的问题。因此，要解决此问题，最好的答案似乎是使用一个模块将HTML转换为PDF，然后将其发送以进行打印。

签出：https://www.npmjs.com/package/jspdf-autotable

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

2 个答案: