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

Question

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

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

我看了Stack Overflow上的这个问题，但对我帮助不大，因为在这种情况下，他们是从HTML内容创建pdf，而在我的情况下，我必须将一组pdf文件合并在一起。 Merge two PDF's generated with jsPDF into one document 我可以从url获取我的PDF文件，也可以从它们的原始内容（base64代码）中获取它们，所以我想知道是否有一种使用这个库来完成它的方法。如果有，我只需要知道使用哪些方法或者可能是文档链接（我也看到过文档，但没有找到）。非常感谢您的答案，任何帮助都将不胜感激。问候！

- Emmanuel_M

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

- Catarina

Answer 2

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

当使用async await与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()

- Timmotoo