前端实现多个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>
  );
}

实际效果

下面是简单效果展示

相关推荐
小桥风满袖33 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心34 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~37 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒44 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师8 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny078 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js