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

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

话不多说开搞

思路

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

首先需要安装这个库

js 复制代码
npm i pdf-lib
  1. 创建一个空白PDF文档。
  2. 遍历即将合并的PDF文档,获取二进制数据。
  3. 依次将数据写入到空白文档中。(如果单个PDF中有多页,需要一次一页往新建空白PDF中添加)
  4. 将合并后的PDF文档保存Blob对象
  5. 创建下载链接并且触发下载

实操

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

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

实际效果

下面是简单效果展示

相关推荐
sasaraku.19 分钟前
serviceWorker缓存资源
前端
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码4 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw54 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app