将 jsPDF 生成的两个 PDF 合并到一个文档中答案

【问题标题】：Merge two PDF's generated with jsPDF into one document将 jsPDF 生成的两个 PDF 合并到一个文档中
【发布时间】：2019-10-01 16:08:45
【问题描述】：

我正在使用 jsPDF 从 HTML 生成文档（使用 .html() 方法），它工作正常。但现在我需要做下一步：

创建 jsPDF 对象。
使用.html()方法添加内容。
向创建的文档添加新页面。
使用相同的.html() 方法将内容添加到第二页。
保存创建的文档。

下面是代码示例：

var doc = new jsPDF({ orientation: 'p', format: 'a4'  });
doc.html(document.getElementById('test'), {
   callback: function (doc) {
      doc.addPage('a4', 'p');
      doc.html(document.getElementById('test'), {
         callback: function (doc) {
            doc.output('dataurlnewwindow');
      }
   }
}

问题是第二页总是空白。想法是使用.html() 方法创建两个单独的文档，然后将这两个文档合并为一个并保存。

所以问题是 - 在 jsPDF 中是否可以将两个文档合并为一个然后保存？

提前致谢！

【问题讨论】：

此功能请求here
你曾经解决过这个问题吗？我面临同样的问题：stackoverflow.com/questions/70284248/…

标签： javascript jspdf

【解决方案1】：

我可以成功地将多个 jsPDF 对象合并到一个 pdf 文件中：

// .ts
 private async generatePdfList(type: string, page = 1) {
    console.log('STEP 1:', new Date());
    const elements = document.querySelectorAll('.staff-list-receipt');
    const elementArray = Array.from(elements);
    const bufferPromises: Promise<any>[] = elementArray
      .filter(element => !!element)
      .map(element => this.elementToPdfBuffer(type, element, page));
    const pdfArrayBuffers = await Promise.all(bufferPromises);
    console.log('STEP 2:', new Date());
    const mergedPdf = await this.mergePdfs(pdfArrayBuffers);
    const pdfUrl = URL.createObjectURL(
      new Blob([mergedPdf], { type: 'application/pdf' }),
    );
  }

  async elementToPdfBuffer(type, element, page) {
    // option 1:
    // const pdf: jsPDF = html2pdf().from(element).toPdf().get("pdf");
    // option 2:
    new jsPDF().fromHTML(element);
    const pdfBuffer = await pdf.output("arraybuffer");
    return pdfBuffer;
  }

  async mergePdfs(pdfsToMerges: ArrayBuffer[]) {
    const mergedPdf = await PDFDocument.create();
    const actions = pdfsToMerges.map(async pdfBuffer => {
      const pdf = await PDFDocument.load(pdfBuffer);
      const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
      copiedPages.forEach((page) => {
        // console.log('page', page.getWidth(), page.getHeight());
        page.setWidth(210);
        mergedPdf.addPage(page);
      });
    });
    await Promise.all(actions);
    const mergedPdfFile = await mergedPdf.save();
    return mergedPdfFile;
  }

【讨论】：