如何使用JavaScript或jQuery将多个PDF Base64合并为单个PDF文件

我们的数组中存储了多个PDF Base64字符串，已经实现单个PDF Base64的处理功能，现在需要将这些PDF合并成单个文件输出，以下是纯前端实现方案：

核心思路 #

前端直接合并PDF需要解析PDF的内部结构，推荐使用pdf-lib这个轻量的纯前端PDF处理库，它支持加载、编辑、合并PDF文件，无需依赖后端服务。

实现步骤 #

1. 引入依赖
   在页面中添加pdf-lib的脚本（可本地引入或使用CDN）：

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

2. 合并PDF代码实现

// 示例：存储多个PDF Base64的数组
const pdfBase64Array = [
  "JVBERi0xLjcNCiWhs8XXDQoxIDAgb2JqDQo8PC9QYWdlcyAyIDAgUiAvVHlwZS9DYXRhbG9nPj4NCmVuZG9iag0KMiAwIG9iag0KPDwvQ291bnQgMS9LaWRzWyA0IDAgUiBdL1R5cGUvUGFnZXM+",
  // 可继续添加更多PDF Base64字符串
];

async function mergePDFs() {
  // 创建一个新的空PDF文档
  const mergedPdfDoc = await PDFLib.PDFDocument.create();

  // 遍历数组中的每个PDF Base64
  for (const base64Str of pdfBase64Array) {
    // 将Base64字符串转换为Uint8Array格式
    const pdfBytes = Uint8Array.from(atob(base64Str), char => char.charCodeAt(0));
    // 加载原PDF文档
    const sourcePdf = await PDFLib.PDFDocument.load(pdfBytes);
    
    // 复制原PDF的所有页面到新文档
    const pageIndices = sourcePdf.getPageIndices();
    const copiedPages = await mergedPdfDoc.copyPages(sourcePdf, pageIndices);
    copiedPages.forEach(page => mergedPdfDoc.addPage(page));
  }

  // 将合并后的PDF转换为带Data URI的Base64字符串
  const mergedPdfDataUri = await mergedPdfDoc.saveAsBase64({ dataUri: true });
  
  // 触发下载操作
  const downloadLink = document.createElement('a');
  downloadLink.href = mergedPdfDataUri;
  downloadLink.download = "merged-combined.pdf";
  downloadLink.click();
}

// 调用合并函数（可绑定到按钮点击事件）
// document.querySelector('#mergeBtn').addEventListener('click', mergePDFs);

注意事项 #

• 确保每个Base64字符串是有效的PDF数据，无效数据会导致合并失败
• 若合并大量或大体积PDF，需注意浏览器内存限制，避免出现页面卡顿
• 该方案完全在前端处理，无需后端接口支持，适合客户端轻量合并场景

内容的提问来源于stack exchange，提问作者Danenthiran j