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

【问题标题】：How can I use jsPDF to render multiple pagination results (HTML to PDF)如何使用 jsPDF 呈现多个分页结果（HTML 到 PDF）
【发布时间】：2021-06-20 18:28:35
【问题描述】：

我正在尝试打印多个 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();
          },
        });
      });
    }
  }

日志顺序：

【问题讨论】：

可能是因为this.page = index + 1;这行？在我看来，在 Promise 解决之前，页面索引不会改变
@JoxieMedina 感谢您的回复，尝试移动“this.page = index + 1;”在承诺之外，但行为是一样的。代码随更改而更新。

标签： angular jspdf ngx-pagination

【解决方案1】：

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

  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 对象保留了 jsPDF.html(...) 的第一个结果，无论此方法是否被多次执行。

【讨论】：