如何使用 jsPDF 呈現多個分頁結果（HTML 到 PDF）

Question

我正在嘗試打印多個 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();
          },
        });
      });
    }
  }

日志順序：

Answer 1

我通過將 jsPDF object 的聲明移動到 promise 並在頁面更改和 promise 之間添加超時來解決了這個問題。

  async printReceipt() {
    console.log('getting the number of pages in the pagination');
    var lenArr = new Array(Math.ceil(this.receiptItems.length / 10));
    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;
      await this.sleep(1000);
      console.log('Converting page:', index + 1);
      await new Promise<void>(async (resolve, reject) => {
        ***var doc = new jsPDF('p', 'pt', [496, 702]);***
        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();
          },
        });
      });
    }
  }

  sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

jsPDF object似乎保留了 jsPDF.html(...) 的第一個結果，無論此方法是否多次執行。