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

最新推荐文章于 2024-06-19 16:51:57 发布

自信的猿

最新推荐文章于 2024-06-19 16:51:57 发布

阅读量1.1k

点赞数 8

文章标签：前端 pdf reactjs react.js

本文链接：https://blog.csdn.net/qq_43834495/article/details/136194051

版权

本文介绍了如何在React应用中利用PDF-Lib库，通过异步请求文件服务器上的PDF文件，逐个合并为一个新的PDF文档，最后生成下载链接进行下载操作的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

话不多说开搞

思路

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

首先需要安装这个库

npm i pdf-lib

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

实操

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

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