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

Question

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

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

这里是代码示例：

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中是否可以将两个文档合并为一个文档然后保存？

提前感谢！

Answer 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;
  }

Answer 2

[Hi @TrầnQuangHiệp，

您能提供PDFDocument的详细信息吗，是来自PDF-lib还是pdfkit？

提前感谢