如何使用 jsPDF 呈现多个分页结果HTML 到 PDF

如何解决如何使用 jsPDF 呈现多个分页结果HTML 到 PDF

我正在尝试打印多个 jsPDF.HTML(...) 的结果。它们中的每一个都在同一 div 内的列表的不同分页中运行。该 div 的 PDF 转换会多次显示第一页，即使我可以在执行每个 jsPDF.HTML(...) 之前看到其中的项目在 UI 中发生变化。

是否有解决方案或至少解释为什么会发生这种情况？

  async printReceipt() {
    console.log('getting the number of pages in the pagination');
    var lenArr = new Array(Math.ceil(this.receiptItems.length / 10));
    var doc = new jsPDF('p','pt',[496,702]);
    var arrayBuffer: ArrayBuffer[] = [];
    var fileURL;
    console.log('creatting main doc');
    for (let index = 0; index < lenArr.length; index++) {
      console.log('Changing pagination to:',index + 1);
      this.page = index + 1;
      console.log('Converting page:',index + 1);
      await new Promise<void>(async (resolve,reject) => {
        doc.html(document.getElementById('receipt'),{
          callback: async (res) => {
            console.log('Adding page to buffer,page:',index + 1);
            arrayBuffer.push(res.output('arraybuffer'));
            if (lenArr.length - 1 == index) {
              console.log('Printing');
              await this.mergePdfs(arrayBuffer);
            }
            resolve();
          },});
      });
    }
  }

日志顺序：

解决方法

我通过将 jsPDF 对象的声明移到 promise 中并在页面更改和 promise 之间添加超时来解决该问题。

{{1}}

看起来无论这个方法是否被多次执行，jsPDF对象都会保留jsPDF.html(...)的第一个结果。