Question

我正在使用jsPDF从HTML生成PDF。当我单击下载按钮时，第一个PDF无法反映更新后的标题。如果我再次按下按钮，它将开始反映更新的标题。我尝试对其进行调试，发现属性更改后，DIV的innerHTML无法立即反映出来。再次点击按钮后，它将从上次点击中选择更新的属性并反映出其价值。

HTML代码：-

<button (click)="onGenerate()">Download Invoice</button>

<div #invoicePDF style="display: block;">
  {{pdfTitle}}
</div>

组件代码：-

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';

export class GroupComponent {
private pdfTitle = "Initial Title";

@ViewChild('invoicePDF') invoicePDF: ElementRef;

public onGenerate(){ 
    this.pdfTitle = "Updated Title";

    const doc = new jsPDF('p','pt','a4');
    let content = this.invoicePDF.nativeElement;

    let specialElementHandler = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    doc.fromHTML(content.innerHTML, 15, 15, {
      'width': 200,
      'elementHandlers': specialElementHandler
    }, function() {
      doc.save('Invoice.pdf');
    });
}
}

Answer 1

您需要将PDF创建代码包装在setTimeout（）块中。这将通知Angular触发更改检测。

setTimeout(()=>{
      doc.fromHTML(content.innerHTML, 15, 15, { 
        'width': 200, 'elementHandlers': specialElementHandler }, 
         function() { doc.save('Invoice.pdf'); 
      })},
 0);

角度2 jsPDF。属性数据未反映在PDF中

1 个答案: