基于pdf-lib和JSZip的前端PDF拆分工具实现

脚本专家

在线PDF拆分工具的前端实现中，核心挑战在于将用户的拆分意图统一转换为稳定的页码分组，再通过pdf-lib复制页面生成多个PDF文件，最后根据结果数量决定直接下载或打包为ZIP。本文围绕这一流程，解析JavaScript层面的关键代码设计。

2. // 文件类型判断：同时检查MIME与后缀，兼容部分浏览器file.type为空的情况
3. export function isPdfSplitFile(file) {
4.   if (!file) return false;
5.   var fileType = String(file.type || '').toLowerCase();
6.   var fileName = String(file.name || '');
7.   return fileType === 'application/pdf' || /\.pdf$/i.test(fileName);
8. }

复制代码

加载PDF时，将原始字节拷贝两份：一份用于拆分操作（splitBytes），一份用于预览及书签读取（previewBytes），避免主链路与辅助链路相互影响。

页码输入解析成统一结构——{label, indices}，label用于文件命名，indices是pdf-lib需要的零基页码数组。支持逗号分隔、倒序区间（如8-6），利用buildPageIndices生成序列。

2. function buildPageIndices(start, end) {
3.   var indices = [];
4.   if (start <= end) {
5.     for (var page = start; page <= end; page++) {
6.       indices.push(page - 1);
7.     }
8.   } else {
9.     for (var page = start; page >= end; page--) {
10.       indices.push(page - 1);
11.     }
12.   }
13.   return indices;
14. }

复制代码

工具提供7种拆分模式：按页码范围、每N页、每页单独、奇偶页、可视化选择、书签、平均拆成N份。每种模式最终都归一化为groups数组，拆分主函数只消费groups，不关心来源。

可视化选择模式下，对用户点选的离散页码先排序去重，再将连续页合并成一个输出段。例如选择1,2,3,7,9,10，合并为1-3、7、9-10三个文件。

2. export function buildPdfSplitVisualGroups(selectedPages) {
3.   var uniquePages = Array.isArray(selectedPages) ? selectedPages
4.     .map(p => Number(p))
5.     .filter(p => Number.isInteger(p) && p > 0)
6.     .sort((a, b) => a - b)
7.     .filter((p, i, arr) => i === 0 || p !== arr[i-1]) : [];
8.   if (!uniquePages.length) throw createPdfSplitInputError('emptySelection');
9.   var groups = [];
10.   var start = uniquePages[0], end = uniquePages[0];
11.   for (var i = 1; i < uniquePages.length; i++) {
12.     if (uniquePages[i] === end + 1) { end = uniquePages[i]; continue; }
13.     pushMergedSelectionGroup(groups, start, end);
14.     start = uniquePages[i]; end = uniquePages[i];
15.   }
16.   pushMergedSelectionGroup(groups, start, end);
17.   return groups;
18. }

复制代码

书签拆分借助pdfjs-dist读取PDF的outline，将每个书签所在页作为开始页，下一书签前一页作为结束页；若第一个书签不在第1页，前面内容单独生成“preface”分段。

2. export function buildPdfSplitBookmarkGroups(bookmarks, totalPages) {
3.   var normalized = bookmarks
4.     .filter(item => item && Number.isInteger(Number(item.pageNumber)) &&
5.                     Number(item.pageNumber) >= 1 && Number(item.pageNumber) <= totalPages)
6.     .map(item => ({title: String(item.title).trim() || 'bookmark', pageNumber: Number(item.pageNumber)}))
7.     .sort((a,b) => a.pageNumber - b.pageNumber);
8.   var groups = [];
9.   if (normalized[0].pageNumber > 1) {
10.     groups.push({label: 'preface', indices: buildPageIndices(1, normalized[0].pageNumber - 1), title: 'preface'});
11.   }
12.   for (var i = 0; i < normalized.length; i++) {
13.     var cur = normalized[i];
14.     var next = normalized[i+1];
15.     var start = cur.pageNumber;
16.     var end = next ? next.pageNumber - 1 : totalPages;
17.     groups.push({label: cur.title, indices: buildPageIndices(start, end), title: cur.title});
18.   }
19.   return groups;
20. }

复制代码

真正拆分PDF的核心是pdf-lib的copyPages。每次创建新文档，将源文档中group.indices对应的页面复制并添加，保存为Blob。

2. for (index = 0; index < groups.length; index++) {
3.   var group = groups[index];
4.   var outputDoc = await PDFDocument.create();
5.   var copiedPages = await outputDoc.copyPages(this.sourceDoc, group.indices);
6.   copiedPages.forEach(page => outputDoc.addPage(page));
7.   var outputBytes = await outputDoc.save();
8.   var outputBlob = new Blob([outputBytes], {type: 'application/pdf'});
9.   nextOutputs.push({name: this.buildOutputName(group, index, groups.length), blob: outputBlob, size: outputBlob.size});
10. }

复制代码

输出文件名根据拆分模式生成，例如每页单独模式为“原文件名_page_页码.pdf”，书签模式为“原文件名_序号_书签标题.pdf”，仅一个结果时固定添加“_split”。

导出时，若结果只有一个PDF直接触发浏览器下载；若多个则使用JSZip打包成ZIP（压缩级别6），再创建临时a标签完成下载。

2. downloadResult: async function() {
3.   if (!this.outputs.length) return;
4.   if (this.outputs.length === 1) { this.downloadOutput(this.outputs[0]); return; }
5.   var zip = new JSZip();
6.   this.outputs.forEach(item => zip.file(item.name, item.blob));
7.   var zipBlob = await zip.generateAsync({type: 'blob', compression: 'DEFLATE', compressionOptions: {level: 6}});
8.   this.downloadBlob(zipBlob, 'split_result.zip');
9. }

复制代码

整个工具设计的关键在于将多种拆分入口统一抽象为页码组，并利用pdf-lib的文档复制能力代替二进制切割，从而稳定可靠地生成新PDF。前端打包使用JSZip处理多文件场景，降低了服务端依赖。

热心网友5

这篇帖子对前端 PDF 拆分的核心流程拆解得非常清晰，特别是“分组归一化”的设计——把7种拆分模式统一成 `groups` 数组，让主拆分函数不关心来源，架构上很干净。实际开发中这种抽象能省掉大量重复逻辑，值得借鉴。 想请教一个细节：书签拆分时，如果两个书签指向同一页（比如连续标题都标记在第5页），你代码中 `normalized` 排序后，后一个书签的 `end` 会是 `next.pageNumber - 1`，即 5-1=4，等于其起始页 5 大于 4，`buildPageIndices` 生成空数组。这种边界情况是否会导致输出空文件？还是会在更上层过滤掉？如果允许空文件，用户拿到一个零页 PDF 可能会困惑。