JavaScript使用pdf-lib在瀏覽器里實(shí)現(xiàn)PDF合并與拆分功能
更新時(shí)間：2026年05月21日 08:19:34 作者：阿明在折騰
本文介紹了pdf-lib庫(kù),這是一個(gè)輕量級(jí)的JavaScript庫(kù),可在瀏覽器和Node.js環(huán)境中操作PDF文檔,pdf-lib支持合并、拆分、旋轉(zhuǎn)、填寫表單等多種功能,無(wú)需依賴后端服務(wù)且體積小巧,還提供了實(shí)戰(zhàn)案例供開發(fā)者參考,需要的朋友可以參考下
在日常開發(fā)中，PDF 處理是一個(gè)常見的需求。無(wú)論是合并多份合同、提取指定頁(yè)面，還是在前端直接操作 PDF 文件，我們都希望在瀏覽器端就能完成，而不是依賴后端服務(wù)。
今天介紹一個(gè)輕量級(jí)的 JavaScript 庫(kù) —— pdf-lib，它可以在瀏覽器和 Node.js 環(huán)境中對(duì) PDF 進(jìn)行各種操作，包括合并、拆分、旋轉(zhuǎn)、填寫表單等。
為什么選擇 pdf-lib？
| 特性 | 說(shuō)明 |
|---|---|
| 純前端運(yùn)行 | 無(wú)需后端，直接在瀏覽器中處理 PDF |
| 零依賴 | 不依賴原生插件或外部服務(wù) |
| 功能豐富 | 支持合并、拆分、編輯、加密等 |
| TypeScript 支持 | 有完整的類型定義 |
| 體積小巧 | 壓縮后約 100KB 左右 |
相比后端方案（如 Python 的 PyPDF2、Java 的 iText），pdf-lib 的優(yōu)勢(shì)在于用戶體驗(yàn)更流暢——用戶選擇文件后秒級(jí)出結(jié)果，無(wú)需等待上傳下載。
安裝與引入
npm 安裝
npm install pdf-lib
CDN 引入
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
基礎(chǔ)用法
import { PDFDocument } from 'pdf-lib';
?
// 讀取本地 PDF 文件
async function loadPdf(file) {
const arrayBuffer = await file.arrayBuffer();
const pdfDoc = await PDFDocument.load(arrayBuffer);
return pdfDoc;
}
實(shí)戰(zhàn)一：PDF 合并
需求：用戶上傳多份 PDF，按順序合并成一份文件。
import { PDFDocument } from 'pdf-lib';
?
/**
* 合并多個(gè) PDF 文件
* @param {File[]} files - 用戶選擇的 PDF 文件列表
* @returns {Promise<Uint8Array>} 合并后的 PDF 數(shù)據(jù)
*/
async function mergePdfs(files) {
// 創(chuàng)建一個(gè)新的空白 PDF 文檔
const mergedPdf = await PDFDocument.create();
?
for (const file of files) {
const arrayBuffer = await file.arrayBuffer();
const pdf = await PDFDocument.load(arrayBuffer);
// 拷貝所有頁(yè)面到新文檔
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach((page) => mergedPdf.addPage(page));
}
?
// 保存為 Uint8Array
return await mergedPdf.save();
}
?
// 下載合并后的文件
async function downloadMergedPdf(files) {
const pdfBytes = await mergePdfs(files);
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'merged.pdf';
a.click();
URL.revokeObjectURL(url);
}
核心 API 解析
PDFDocument.create()：創(chuàng)建空白 PDFPDFDocument.load(arrayBuffer)：加載已有 PDFcopyPages(targetDoc, pageIndices)：拷貝頁(yè)面（注意是異步的）addPage(page)：添加頁(yè)面到文檔
實(shí)戰(zhàn)二：PDF 拆分
需求：從大文件中提取指定頁(yè)碼范圍，生成新的 PDF。
import { PDFDocument } from 'pdf-lib';
?
/**
* 提取 PDF 指定頁(yè)面
* @param {File} file - 源 PDF 文件
* @param {number[]} pageIndices - 要提取的頁(yè)碼索引（從0開始）
* @returns {Promise<Uint8Array>}
*/
async function splitPdf(file, pageIndices) {
const arrayBuffer = await file.arrayBuffer();
const srcPdf = await PDFDocument.load(arrayBuffer);
// 創(chuàng)建新文檔
const newPdf = await PDFDocument.create();
// 拷貝指定頁(yè)面
const copiedPages = await newPdf.copyPages(srcPdf, pageIndices);
copiedPages.forEach((page) => newPdf.addPage(page));
return await newPdf.save();
}
?
// 使用示例：提取第 2-5 頁(yè)（索引 1-4）
async function extractPages(file, startPage, endPage) {
const indices = [];
for (let i = startPage - 1; i < endPage; i++) {
indices.push(i);
}
return await splitPdf(file, indices);
}
進(jìn)階：按固定頁(yè)數(shù)拆分
/**
* 將 PDF 按每 N 頁(yè)拆分成多個(gè)文件
*/
async function splitByPageCount(file, pagesPerFile) {
const arrayBuffer = await file.arrayBuffer();
const srcPdf = await PDFDocument.load(arrayBuffer);
const totalPages = srcPdf.getPageCount();
const results = [];
for (let i = 0; i < totalPages; i += pagesPerFile) {
const end = Math.min(i + pagesPerFile, totalPages);
const indices = Array.from({ length: end - i }, (_, j) => i + j);
const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(srcPdf, indices);
copiedPages.forEach((page) => newPdf.addPage(page));
results.push(await newPdf.save());
}
return results; // 返回多個(gè) Uint8Array
}
一個(gè)簡(jiǎn)單的 UI 示例
把上面的代碼封裝成一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)工具：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF 工具</title>
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
</head>
<body>
<h2>PDF 合并</h2>
<input type="file" id="mergeInput" multiple accept=".pdf">
<button onclick="handleMerge()">合并并下載</button>
?
<script>
const { PDFDocument } = PDFLib;
?
async function handleMerge() {
const files = document.getElementById('mergeInput').files;
if (files.length < 2) {
alert('請(qǐng)至少選擇兩個(gè) PDF 文件');
return;
}
const mergedPdf = await PDFDocument.create();
for (const file of files) {
const bytes = await file.arrayBuffer();
const pdf = await PDFDocument.load(bytes);
const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
pages.forEach(p => mergedPdf.addPage(p));
}
const pdfBytes = await mergedPdf.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'merged.pdf';
a.click();
URL.revokeObjectURL(url);
}
</script>
</body>
</html>把上面代碼保存為 .html 文件，用瀏覽器打開就能直接用。
注意事項(xiàng)
- 大文件性能：pdf-lib 適合處理幾十 MB 以內(nèi)的 PDF，如果是幾百 MB 的掃描件，可能會(huì)有性能瓶頸
- 字體兼容：某些特殊字體嵌入的 PDF，合并后可能出現(xiàn)字體丟失
- 加密文件：受密碼保護(hù)的 PDF 需要先解密才能處理
不想寫代碼？
如果你只是想快速處理 PDF，不想搭建前端項(xiàng)目、寫代碼、調(diào)試兼容性問(wèn)題，可以直接用現(xiàn)成的在線工具。
上面提到的合并、拆分功能，還有 PDF 轉(zhuǎn) Word、壓縮等常用操作，這個(gè)在線工具集都覆蓋了：
- ? 打開網(wǎng)頁(yè)直接用，不用下載軟件
- ? 無(wú)需注冊(cè)登錄
- ? 目前完全免費(fèi)，沒(méi)有頁(yè)數(shù)限制
工具派：百度搜索：工具派，顯示的第一個(gè)就是
當(dāng)然，如果你是開發(fā)者，想要把 PDF 功能集成到自己的項(xiàng)目里，pdf-lib 仍然是一個(gè)非常值得考慮的選擇。
以上就是JavaScript使用pdf-lib在瀏覽器里實(shí)現(xiàn)PDF合并與拆分功能的詳細(xì)內(nèi)容，更多關(guān)于JavaScript瀏覽器PDF合并與拆分的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦。小編覺得挺不錯(cuò)的。現(xiàn)在分享給大家，讓大家參考一下2016-03-03![JavaScript 應(yīng)用技巧集合[推薦]](http://img.jbzj.com/images/xgimg/bcimg2.png)
前段時(shí)間我曾經(jīng)對(duì)JavaScript中的應(yīng)用技巧進(jìn)行了收集和總結(jié)這里我將會(huì)對(duì)這些應(yīng)用技巧進(jìn)行集中描述，如果你覺得遺漏了一些好用的應(yīng)用技巧，也請(qǐng)?jiān)诹粞灾刑岢?，我?huì)及時(shí)更新到這篇文章中的。2009-08-08
本文詳細(xì)介紹了JavaScript中的Map數(shù)據(jù)結(jié)構(gòu),包括它的創(chuàng)建、常用方法、迭代方式以及與對(duì)象的區(qū)別,文章簡(jiǎn)要介紹了WeakMap的概念和使用場(chǎng)景,感興趣的朋友一起看看吧2025-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序自定義組件Component的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
微信小程序?qū)崿F(xiàn)發(fā)微博功能的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)微博功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
本文主要是結(jié)合自己的一些項(xiàng)目經(jīng)驗(yàn)，給大家提出了幾點(diǎn)減少瀏覽器reflow和repaint的方法和注意事項(xiàng)，希望對(duì)大家能有所幫助。2015-02-02
下面小編就為大家?guī)?lái)一篇封裝獲取dom元素的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
這篇文章主要介紹了js事件監(jiān)聽器用法,以實(shí)例形式較為詳細(xì)的分析了javascript事件監(jiān)聽器使用注意事項(xiàng)與相關(guān)技巧,需要的朋友可以參考下2015-06-06
JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法,涉及javascript針對(duì)頁(yè)面元素樣式及屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07