将使用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中是否可以将两个文档合并成一个并保存呢？

提前致谢！

- Stranger_tm

---

这个功能在此处被请求：https://github.com/MrRio/jsPDF/issues/131 - mrash

你曾经解决过这个问题吗？我也遇到了同样的问题：https://stackoverflow.com/questions/70284248/generate-a-multipage-pdf-document-using-jspdf - E-Bat

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

- Hiep Tran

Answer 2

如果你只需要合并PDF文件，那么只需使用一个PDF库，无需同时加载“jspdf”和“pdf-lib”，每个都足够庞大。

- Rumen Neshev