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

实际效果

下面是简单效果展示

相关推荐
Sun_light2 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子5 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00005 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心6 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm10 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v14 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠16 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue18 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷22 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016123 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js