如何使用 jsPDF 合并两个 PDF 文件答案

【问题标题】：How to Merge Two PDF Files Using jsPDF如何使用 jsPDF 合并两个 PDF 文件
【发布时间】：2020-05-30 17:55:37
【问题描述】：

我想知道如何使用 jsPDF 将两个（或多个）PDF 文件合并为一个文件，然后使用浏览器的用户 pdf 查看器显示它。

我的要求是简化打印一组文档的过程，不是一个一个地打印，而是将它们全部合并并打印一个文件。

我在 Stack Overflow 中查看了另一个问题，但这对我没有太大帮助，因为在这种情况下，他们正在从 HTML 内容创建 pdf，而在我的情况下，我必须合并一组 pdf 文件一起。 Merge two PDF's generated with jsPDF into one document

我可以从 url 获取我的 PDF 文件，也可以从它们（base64 代码）获取原始内容，所以我想知道是否有一种方法可以使用这个库来做到这一点。如果是这样，我只需要知道使用什么方法或者文档的链接（我也看过文档，但没有找到）

非常感谢您的回答，任何帮助将不胜感激。问候！

【问题讨论】：

标签： javascript jquery pdf merge jspdf

【解决方案1】：

您可以将您的 jsPDF 文档转换为数组缓冲区 (check here)

const doc = new jsPDF('p', 'mm', 'a4');
...
const arrayBuffer = doc.output('arraybuffer');

然后使用here给出的解决方案

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

【讨论】：

【解决方案2】：

以上solution使用包pdf-lib。目前这是在客户端合并 pdf 的最佳解决方案。

当使用 Array.map() 的 async await 时，您还需要确保 ArrayBuffer[] 输入中的文档保持正确的顺序。这是一种解决方案（TS）：

import { PDFDocument, PDFPage } from "pdf-lib";

export async function mergePdfs(pdfsToMerge: ArrayBuffer[]): Promise<ArrayBufferLike> {
  const mergedPdf: PDFDocument = await PDFDocument.create();

  const createInnerPromise = async (arrayBuffer: ArrayBuffer): Promise<PDFPage[]> => {
    const pdf: PDFDocument = await PDFDocument.load(arrayBuffer);
    return await mergedPdf.copyPages(pdf, pdf.getPageIndices());
  };

  const outerPromise: Promise<PDFPage[]>[] = pdfsToMerge.map((arrayBuffer) => {
    const innerPromise: Promise<PDFPage[]> = createInnerPromise(arrayBuffer);
    return innerPromise;
  });

  const resultOuterPromise: PDFPage[][] = await Promise.all(outerPromise);

  resultOuterPromise.forEach((pageArray: PDFPage[]) => {
    pageArray.forEach((page: PDFPage) => {
      mergedPdf.addPage(page);
    });
  });

  return (await mergedPdf.save()).buffer;
}

要创建输入 ArayBuffer[]，您可以将 jsPDF 中的 pdf 输出为 ArrayBuffer：

jsPdfDocument.output("arraybuffer")

如果它是一个文件，你可以使用：

await file.arrayBuffer()

【讨论】：