基于JavaScript实现在线PDF拆分工具
更新时间：2026年05月05日 08:55:04 作者：滕青山
文章主要讲述了一个PDF拆分工具的功能层实现,包括PDF的读取、拆分生成、页面预览等书签读取等核心功能的实现细节；以及工具的主要特点和工作流程；并强调了统一的页码分组作为核心的设计,需要的朋友可以参考下
这篇只讲本项目里“PDF拆分”工具的功能层 JavaScript 实现。主流程可以概括为：
选择 PDF -> 读取页数 -> 生成拆分页组 -> 复制指定页面 -> 生成多个 PDF -> 单文件下载或 ZIP 打包下载
工具基于 Vue 组织交互状态，核心 PDF 操作使用 pdf-lib，多文件结果打包使用 JSZip，页面预览和书签读取由 pdfjs-dist 辅助完成。
在线工具网址：https://see-tool.com/pdf-split
工具截图：
1. 文件进入流程前先做 PDF 判断
文件选择和拖拽上传共用同一套入口。真正加载前，先判断文件类型：
export function isPdfSplitFile(file) {
if (!file) {
return false;
}
var fileType = String(file.type || "").toLowerCase();
var fileName = String(file.name || "");
return fileType === "application/pdf" || /\.pdf$/i.test(fileName);
}
这里同时判断 MIME 和文件后缀，是因为部分浏览器环境下 file.type 可能为空，只依赖 MIME 会误拦正常 PDF。
加载文件时，会把同一份原始字节切成两份用途：
var rawBytes = await file.arrayBuffer(); var splitBytes = rawBytes.slice(0); var previewBytes = rawBytes.slice(0); var sourceDoc = await PDFDocument.load(splitBytes);
splitBytes 用于后续拆分，previewBytes 用于预览和书签读取。这样拆分主链路和辅助信息链路互不影响。
2. 页码输入解析成统一的拆分页组
拆分逻辑不是直接处理输入框字符串，而是先转成统一结构：
{
label: "1-3",
indices: [0, 1, 2]
}
label 用于文件命名，indices 是 pdf-lib 需要的零基页码数组。
页码范围解析支持逗号分隔，也支持倒序区间：
function buildPageIndices(start, end) {
var indices = [];
var page;
if (start <= end) {
for (page = start; page <= end; page += 1) {
indices.push(page - 1);
}
return indices;
}
for (page = start; page >= end; page -= 1) {
indices.push(page - 1);
}
return indices;
}
所以用户输入 1-3,5,8-6 时，会生成三个输出段：第 1 到 3 页、第 5 页、第 8 到 6 页。
3. 多种拆分模式最终都归一到 groups
工具支持按页码范围、每 N 页、每页单独、奇偶页、可视化选择、书签、平均拆成 N 份。虽然入口不同，但最终都会变成 groups：
buildSplitGroups: function () {
if (this.splitMode === "ranges") {
return parsePdfSplitRangeGroups(this.rangeInput, this.totalPages);
}
if (this.splitMode === "everyN") {
return buildPdfSplitCountGroups(
this.totalPages,
parsePdfSplitPositiveInt(this.everyNInput),
);
}
if (this.splitMode === "everyPage") {
return buildPdfSplitEveryPageGroups(this.totalPages);
}
if (this.splitMode === "evenOdd") {
return buildPdfSplitEvenOddGroups(this.totalPages, this.evenOddMode);
}
if (this.splitMode === "visual") {
return buildPdfSplitVisualGroups(this.selectedPages);
}
if (this.splitMode === "bookmarks") {
return buildPdfSplitBookmarkGroups(this.bookmarkItems, this.totalPages);
}
if (this.splitMode === "nTimes") {
return buildPdfSplitNPartsGroups(
this.totalPages,
parsePdfSplitPositiveInt(this.nTimesInput),
);
}
return [];
}
这个设计的好处是，真正拆分 PDF 时不关心用户选择了哪种模式，只消费统一的页码分组。
4. 可视化选择会自动合并连续页
可视化模式下，用户点选的是离散页码。工具会先排序、去重，再把连续页合并成一个输出段：
export function buildPdfSplitVisualGroups(selectedPages) {
var uniquePages = Array.isArray(selectedPages)
? selectedPages
.map(function (page) {
return Number(page);
})
.filter(function (page) {
return Number.isInteger(page) && page > 0;
})
.sort(function (left, right) {
return left - right;
})
.filter(function (page, index, source) {
return index === 0 || page !== source[index - 1];
})
: [];
if (!uniquePages.length) {
throw createPdfSplitInputError("emptySelection");
}
var groups = [];
var start = uniquePages[0];
var end = uniquePages[0];
for (var i = 1; i < uniquePages.length; i += 1) {
if (uniquePages[i] === end + 1) {
end = uniquePages[i];
continue;
}
pushMergedSelectionGroup(groups, start, end);
start = uniquePages[i];
end = uniquePages[i];
}
pushMergedSelectionGroup(groups, start, end);
return groups;
}
比如选择 1、2、3、7、9、10，结果会拆成 1-3、7、9-10 三个文件。
5. 书签拆分按顶层书签生成区间
书签模式先读取 PDF 的 outline，再把书签所在页转换成拆分区间。核心逻辑是：当前书签页作为开始页，下一个书签前一页作为结束页。
export function buildPdfSplitBookmarkGroups(bookmarks, totalPages) {
var normalizedBookmarks = Array.isArray(bookmarks)
? bookmarks
.filter(function (item) {
return (
item &&
Number.isInteger(Number(item.pageNumber)) &&
Number(item.pageNumber) >= 1 &&
Number(item.pageNumber) <= totalPages
);
})
.map(function (item) {
return {
title: String(item.title || "").trim() || "bookmark",
pageNumber: Number(item.pageNumber),
};
})
.sort(function (left, right) {
return left.pageNumber - right.pageNumber;
})
: [];
var groups = [];
if (normalizedBookmarks[0].pageNumber > 1) {
groups.push({
label: "preface",
indices: buildPageIndices(1, normalizedBookmarks[0].pageNumber - 1),
title: "preface",
});
}
for (var index = 0; index < normalizedBookmarks.length; index += 1) {
var current = normalizedBookmarks[index];
var next = normalizedBookmarks[index + 1];
var start = current.pageNumber;
var end = next ? next.pageNumber - 1 : totalPages;
groups.push({
label: current.title,
indices: buildPageIndices(start, end),
title: current.title,
});
}
return groups;
}
如果第一个书签不在第一页，前面的内容会单独生成一个 preface 分段。
6. 真正拆分 PDF 的核心是 copyPages
拆分主函数先构建 groups，然后每个分组创建一个新的 PDF：
for (index = 0; index < groups.length; index += 1) {
var group = groups[index];
var outputDoc = await PDFDocument.create();
var copiedPages = await outputDoc.copyPages(
this.sourceDoc,
group.indices,
);
copiedPages.forEach(function (page) {
outputDoc.addPage(page);
});
var outputBytes = await outputDoc.save();
var outputBlob = new Blob([outputBytes], {
type: "application/pdf",
});
nextOutputs.push({
name: this.buildOutputName(group, index, groups.length),
blob: outputBlob,
size: outputBlob.size,
});
}
这里不是修改原 PDF，也不是切割二进制文件，而是把源文档里的指定页面复制到一个新文档。group.indices 决定当前输出文件包含哪些页。
7. 输出文件名根据拆分模式生成
文件名会先清理原 PDF 名称，再结合模式和页码标签生成：
export function buildPdfSplitOutputName(options) {
var config = options || {};
var baseName = safePdfSplitBaseName(config.baseName);
var index = Number(config.index) || 0;
var total = Number(config.total) || 0;
var label = String(config.label || "");
var mode = String(config.mode || "ranges");
var sequence = String(index + 1).padStart(3, "0");
var safeLabel = sanitizePdfSplitFileLabel(label) || sequence;
if (mode === "everyPage") {
return baseName + "_page_" + safeLabel + ".pdf";
}
if (mode === "bookmarks") {
return baseName + "_" + sequence + "_" + safeLabel + ".pdf";
}
if (total === 1) {
return baseName + "_split.pdf";
}
return baseName + "_split_" + sequence + "_p" + safeLabel + ".pdf";
}
这样拆出多个文件时，用户能从文件名看出顺序和页码范围。
8. 单结果直接下载，多结果打包 ZIP
导出时先判断结果数量。只有一个 PDF 时直接下载；多个 PDF 时放进 ZIP：
downloadResult: async function () {
if (!this.outputs.length) {
return;
}
if (this.outputs.length === 1) {
this.downloadOutput(this.outputs[0]);
return;
}
var zip = new JSZip();
this.outputs.forEach(function (item) {
zip.file(item.name, item.blob);
});
var zipBlob = await zip.generateAsync({
type: "blob",
compression: "DEFLATE",
compressionOptions: {
level: 6,
},
});
this.downloadBlob(zipBlob, "split_result.zip");
}
浏览器下载统一通过 Blob 和临时 a 标签完成：
downloadBlob: function (blob, filename) {
var url = URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
整个 PDF 拆分功能的核心，就是把不同输入方式都转换成稳定的页码分组，再用 pdf-lib 复制页面生成新文档，最后根据结果数量决定直接下载还是打包下载。
以上就是基于JavaScript实现在线PDF拆分工具的详细内容，更多关于JavaScript在线PDF拆分工具的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了微信小程序自定义多选事件的实现代码，小程序和vue一样是没法操作dom的，所以要利用数组的下标和自定义属性来进行三元判断，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
本文主要介绍了JavaScript声明函数的5种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
实例分析js类中的公有和私有变量2008-07-07
这篇文章主要介绍了javascript实现的猜数小游戏,游戏中用户共有10次猜测机会,并且每次都有不同的提示信息,该游戏涉及javascript流程控制与数值运算的相关技巧,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了Bootstrap 网站实例之单页营销网站的相关资料,本文给大家介绍的非常详细具有一定的参考借鉴价值，需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了javascript异步编程，从浅入深的学习javascript异步编程，对javascript异步编程感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了用js控制电灯开关，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了javascript正则表达式模糊匹配IP地址功能,结合简单实例形式演示了JS模糊匹配IP地址的实现方法,涉及针对数字及字符串的相关正则判定与匹配操作技巧,需要的朋友可以参考下2017-01-01
JavaScript中运算符规则的隐式类型转换是什么? 这是每个学习Javascript的新手们都应该知道的一个问题，下面这篇文章主要给大家介绍了关于JavaScript中运算符规则和隐式类型转换的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
这篇文章主要介绍了JavaScript作用域链,结合实例形式较为详细的分析了作用域链的原理、功能与相关操作注意事项,需要的朋友可以参考下2019-01-01
最新评论