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

Question

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

我的要求是使打印一组文档的过程变得更容易，而不是逐个打印，只需将它们全部合并并打印一个文件。

我在 Stack Overflow 中查看了另一个问题，但这对我没有太大帮助，因为在这种情况下，他们正在从 HTML 内容创建 pdf，而在我的情况下，我必须将一组 pdf 文件合并在一起。 将 jsPDF 生成的两个 PDF 合并为一个文档

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

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

Answer 1

您可以将 jsPDF 文档转换为数组缓冲区（请查看此处）

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

然后使用这里给出的解决方案

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

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

当将 async wait 与 Array.map() 一起使用时，您还需要确保 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()