JavaScript使用pdf-lib在瀏覽器里實現(xiàn)PDF合并與拆分功能

更新時間：2026年05月21日 08:19:34 作者：阿明在折騰

本文介紹了pdf-lib庫,這是一個輕量級的JavaScript庫,可在瀏覽器和Node.js環(huán)境中操作PDF文檔,pdf-lib支持合并、拆分、旋轉(zhuǎn)、填寫表單等多種功能,無需依賴后端服務且體積小巧,還提供了實戰(zhàn)案例供開發(fā)者參考,需要的朋友可以參考下

為什么選擇 pdf-lib？

特性	說明
純前端運行	無需后端，直接在瀏覽器中處理 PDF
零依賴	不依賴原生插件或外部服務
功能豐富	支持合并、拆分、編輯、加密等
TypeScript 支持	有完整的類型定義
體積小巧	壓縮后約 100KB 左右

相比后端方案（如 Python 的 PyPDF2、Java 的 iText），pdf-lib 的優(yōu)勢在于用戶體驗更流暢——用戶選擇文件后秒級出結(jié)果，無需等待上傳下載。

安裝與引入

npm 安裝

npm install pdf-lib

CDN 引入

<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>

基礎用法

import { PDFDocument } from 'pdf-lib';
?
// 讀取本地 PDF 文件
async function loadPdf(file) {
  const arrayBuffer = await file.arrayBuffer();
  const pdfDoc = await PDFDocument.load(arrayBuffer);
  return pdfDoc;
}

實戰(zhàn)一：PDF 合并

需求：用戶上傳多份 PDF，按順序合并成一份文件。

import { PDFDocument } from 'pdf-lib';
?
/**
 * 合并多個 PDF 文件
 * @param {File[]} files - 用戶選擇的 PDF 文件列表
 * @returns {Promise<Uint8Array>} 合并后的 PDF 數(shù)據(jù)
 */
async function mergePdfs(files) {
  // 創(chuàng)建一個新的空白 PDF 文檔
  const mergedPdf = await PDFDocument.create();
?
  for (const file of files) {
    const arrayBuffer = await file.arrayBuffer();
    const pdf = await PDFDocument.load(arrayBuffer);
    
    // 拷貝所有頁面到新文檔
    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)建空白 PDF
PDFDocument.load(arrayBuffer)：加載已有 PDF
copyPages(targetDoc, pageIndices)：拷貝頁面（注意是異步的）
addPage(page)：添加頁面到文檔

實戰(zhàn)二：PDF 拆分

需求：從大文件中提取指定頁碼范圍，生成新的 PDF。

import { PDFDocument } from 'pdf-lib';
?
/**
 * 提取 PDF 指定頁面
 * @param {File} file - 源 PDF 文件
 * @param {number[]} pageIndices - 要提取的頁碼索引（從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();
  
  // 拷貝指定頁面
  const copiedPages = await newPdf.copyPages(srcPdf, pageIndices);
  copiedPages.forEach((page) => newPdf.addPage(page));
  
  return await newPdf.save();
}
?
// 使用示例：提取第 2-5 頁（索引 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);
}

進階：按固定頁數(shù)拆分

/**
 * 將 PDF 按每 N 頁拆分成多個文件
 */
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; // 返回多個 Uint8Array
}

一個簡單的 UI 示例

把上面的代碼封裝成一個簡單的網(wǎng)頁工具：

<!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('請至少選擇兩個 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 文件，用瀏覽器打開就能直接用。