前端实现多个PDF文件合并为一个PDF文件

脚踢易拉罐2024-02-20 16:44

最近遇到一个功能：即将多个文件服务器中的PDF文件合并为一个PDF文件进行下载打印操作。

话不多说开搞

思路

我们需要使用到pdf-lib这个库，它提供了一组丰富的功能，可以在客户端和服务器端中对PDF文件进行各种操作.

首先需要安装这个库

js 复制代码

npm i pdf-lib

创建一个空白PDF文档。
遍历即将合并的PDF文档，获取二进制数据。
依次将数据写入到空白文档中。(如果单个PDF中有多页，需要一次一页往新建空白PDF中添加)
将合并后的PDF文档保存为Blob对象。
创建下载链接并且触发下载。

实操

好的，根据上面的思路我们开始实现这个功能。

js 复制代码

import React from "react";
import { PDFDocument } from "pdf-lib";
export default function Test() {
  async function mergePDFs(pdfUrls) {
    // 创建一个新的空白PDF文档
    const mergedPdfDoc = await PDFDocument.create();

    for (const pdfUrl of pdfUrls) {
        // 获取PDF文件的二进制数据
        const pdfBytes = await fetch(pdfUrl).then(response => response.arrayBuffer());

        // 将获取到的PDF文件添加到新的文档中
        const pdfDoc = await PDFDocument.load(pdfBytes);
        // 如果单个PDF为多页，则要一页一页往新建的PDF中添加
        const copiedPages = await mergedPdfDoc.copyPages(pdfDoc, pdfDoc.getPageIndices());
        copiedPages.forEach(page => mergedPdfDoc.addPage(page));
    }

    // 将合并后的PDF保存为Blob对象
    const mergedPdfBytes = await mergedPdfDoc.save();
    const mergedPdfBlob = new Blob([mergedPdfBytes], { type: 'application/pdf' });

    // 创建下载链接
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(mergedPdfBlob);
    // 设置下载文件名
    downloadLink.download = 'mergedPdf.pdf'; 

    // 触发下载
    downloadLink.click();
}
// mergePDFs()的入参为文件服务器中的PDF文件链接，需要手动替换
  return (
    <div>
      <button
        onClick={() =>
          mergePDFs([
            "https://test/01.pdf",
            "https://test/02.pdf",
            "https://test/03.pdf",
          ])
        }
      >
        下载
      </button>
    </div>
  );
}

实际效果

下面是简单效果展示