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

Question

i am using jspdf and jspdf-autotable to display the json data in pdf view mode,but the pdf view mode is displaying in 2nd click due to delay. Can anyone help me to solve this.

Here is working 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

If you see the console in your demo, you will see an error. The iframe need to be placed before it is used.

You can do this without *ngIf

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

Answer 2

Add little timeout on document operation on last line. This will make sure that this line will execute in the last after above statements.

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