纯前端 PDF 合并避坑指南:合并后顺序乱了怎么办?

3 阅读3分钟

PDF 合并听起来简单,但很多人遇到合并后页面顺序错乱、文件体积暴涨、或某些 PDF 无法合并的问题。今天聊聊纯前端 PDF 合并的核心问题和解决方案。


合并的常见场景

场景说明
报告整合把多个章节 PDF 合并成完整报告
票据汇总合并月度发票、收据成一份 PDF
申请归档把申请表、成绩单等合并成一个文件
档案整理相关文档统一归档保存

技术方案:pdf-lib 合并 PDF

核心实现

import { PDFDocument } from 'pdf-lib'async function mergePdfs(files: File[]): Promise<Uint8Array> {
  const mergedPdf = await PDFDocument.create()
  
  for (const file of files) {
    const arrayBuffer = await file.arrayBuffer()
    const pdfDoc = await PDFDocument.load(arrayBuffer)
    const pageIndices = Array.from({ length: pdfDoc.getPageCount() }, (_, i) => i)
    const pages = await mergedPdf.copyPages(pdfDoc, pageIndices)
    pages.forEach(page => mergedPdf.addPage(page))
  }
  
  return await mergedPdf.save()
}

关键点:页面复制

pdf-lib 通过 copyPages 复制页面:

const pages = await mergedPdf.copyPages(pdfDoc, pageIndices)
pages.forEach(page => mergedPdf.addPage(page))

关键点:顺序控制

PDF 按上传顺序合并,拖拽重排可调整顺序。


常见坑位

坑 1:合并后页面顺序错乱

用户上传的 PDF 顺序不对,合并结果也不对。

解决方案

  • 上传前检查文件顺序
  • 提供拖拽排序功能
  • 合并前预览效果

坑 2:合并后文件体积暴增

多个 PDF 合并后文件可能比预期大很多。

解决方案

  • 合并前先压缩各 PDF
  • 使用压缩工具处理后下载
  • 删除不必要页面再合并

坑 3:不同页面尺寸导致排版混乱

A4 和 Letter 混合合并后排版不一致。

解决方案

  • 统一页面尺寸后再合并
  • 使用"适应页面"选项
  • 分别合并同类文件

坑 4:加密 PDF 无法合并

受密码保护的 PDF 无法直接合并。

解决方案

  • 先解密 PDF
  • 或使用支持解密的工具
  • 注意:解密后文件安全性降低

坑 5:大文件合并导致浏览器卡顿

大量或超大 PDF 合并时浏览器可能卡死。

解决方案

  • 分批合并(每次 10 个以内)
  • 关闭其他标签页释放内存
  • 使用桌面软件处理大文件

和其他合并方式的区别

工具处理方式适用场景
纯前端工具浏览器本地处理敏感文档、隐私优先
在线转换工具上传服务器处理普通文档
Adobe Acrobat桌面软件完整处理复杂文档、专业需求

纯前端的优势是隐私安全,适合处理敏感文档。


使用建议

  1. 控制单次数量:建议 10 个 PDF 以内一次合并
  2. 检查文件顺序:合并前确认顺序正确
  3. 敏感文档本地处理:不要用上传式工具
  4. 检查输出效果:合并后抽查几页确认

总结

  • PDF 合并核心是顺序控制文件管理
  • 大批量合并建议用桌面软件
  • 纯前端方案适合私密文档
  • 合并前务必备份原始文件

搜索「PDF合并」即可找到纯浏览器端工具,文件不上传服务器。