如何消除在angular2中显示pdf视图的延迟答案

【问题标题】：How to remove the delay in displaying pdf view in angular2如何消除在angular2中显示pdf视图的延迟
【发布时间】：2019-03-13 10:33:25
【问题描述】：

我正在使用 jspdf 和 jspdf-autotable 以 pdf 视图模式显示 json 数据，但由于延迟，pdf 视图模式在第二次单击中显示。谁能帮我解决这个问题。

这里正在工作DEMO

HTML：

<iframe id="convertToPdf" type="application/pdf"  width="100%" height="100%" *ngIf="displayTable"></iframe>

TS：

captureScreen() {
    this.displayTable = true;
    var doc = new jsPDF();
    var col = ["year", "budget", 'exclude', 'expenses'];
    var rows = [];
    for (var i = 0; i < this.items.length; i++) {
      var temp = []
      for (var key in this.items[i]) {
        temp.push(this.items[i][key])
      }
      rows.push(temp);
    }
    doc.autoTable(col, rows);
    document.getElementById("convertToPdf").setAttribute('src', doc.output('datauri'))
  }

【问题讨论】：

标签： angular

【解决方案1】：

如果您在演示中看到控制台，您将看到一个错误。 iframe在使用前需要放置。

你可以在没有 *ngIf 的情况下做到这一点

<iframe id="convertToPdf" type="application/pdf"  width="100%" height="100%" [ngStyle]="{display: (displayTable ? 'block' : 'none')}"></iframe>

【讨论】：

【解决方案2】：

在最后一行的document 操作上添加少许超时。这将确保这一行将在上述语句的最后一个执行。

    setTimeout(() => {
      document.getElementById("convertToPdf").setAttribute('src', doc.output('datauri'))
    }, 10)

【讨论】：