当前位置：首页 > news >正文

前端将多个PDF链接的内容拼接成一个后返回出一个链接进行打开

news 来源：原创 2025/6/13 15:42:28

1、引用了 “pdf-lib”库，它提供了一组丰富的功能，可以在客户端和服务器端中对PDF文件进行各种操作。

要对应 node 版本进行下载对应 “pdf-lib”库的依赖（直接问下AI）；

node：v18.20.4

pdf-lib："^1.17.1"

这是我这边的版本，如果一样的话可以直接下载依赖

安装命令：

yarn add pdf-lib
//指定版本
yarn add pdf-lib@1.17.1

2、安装完在需要的页面进行引用

import { PDFDocument } from 'pdf-lib';

3、思路：

创建一个空白的PDF文档
遍历即将合并的PDF文档，获取二进制数据
依次将数据写入到空白文档中（如果单个PDF中有多页，需要一次一页往新建空白PDF中添加）
将合并后的PDF文档保存为Blob对象
创建URL并返回

4、具体代码实现：

// 将多个PDF链接的内容拼接成一个后返回出一个链接进行打开
const pdfLinkPrint = async (links: string[]) => {async function mergePDFs(links) {try {// 创建一个新的空白PDF文档const mergedPdfDoc = await PDFDocument.create();for (const pdfUrl of links) {// 获取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: any) => mergedPdfDoc.addPage(page));}// 将合并后的PDF保存为Blob对象const mergedPdfBytes = await mergedPdfDoc.save();const mergedPdfBlob = new Blob([mergedPdfBytes], { type: 'application/pdf' });return URL.createObjectURL(mergedPdfBlob);} catch {}}if (!links.length) return;const url = links.length === 1 ? links[0] : await mergePDFs(links);const newWindow = window.open(url);//判断新窗口是否已打开if (newWindow) {newWindow.onload = () => {setTimeout(() => {URL.revokeObjectURL(urls); // 释放 Blob URL}, 1000);};}
};

5、最终的实现效果：