javascript - 将两个用 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;
  }