Question

我正在使用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'))
  }

Answer 1

如果在演示中看到控制台，则会看到错误。使用iframe之前，需要先放置它。

您可以不使用* ngIf

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

Answer 2

在最后一行的document操作上增加一点超时。这将确保该行将在上述语句之后的最后一行中执行。

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

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

2 个答案: