如何使用JavaScript合并多个PDF的DataURL并下载

嘿，这个问题我之前帮好几个开发者踩过坑——直接把多个PDF的DataURL字符串拼在一起绝对行不通！每个PDF都是有完整文件结构的独立文档，包含文件头、交叉引用表这些关键信息，硬拼出来的只会是无效文件。下面给你一套靠谱的实现方案，用浏览器端的PDF处理库来搞定：

核心思路 #

正确的处理逻辑分三步：

1. 把每个PDF的DataURL解码成二进制原始数据
2. 用专业的PDF库将这些PDF的页面合并到一个新的PDF文档中
3. 把合并后的PDF重新生成DataURL（供后续请求用）或者直接触发下载

具体实现（用pdf-lib库） #

我推荐用pdf-lib，这是个轻量又强大的纯JS PDF处理库，完全在浏览器端运行，不需要后端支持。

第一步：把DataURL转成二进制数据 #

每个PDF的DataURL格式都是data:application/pdf;base64,<编码内容>，我们得先把它解码成PDF能识别的二进制数组：

async function dataUrlToPdfBytes(dataUrl) {
  // 切掉DataURL的前缀，只保留base64编码部分
  const base64Str = dataUrl.split(',')[1];
  // 解码base64为二进制字符串
  const binaryString = atob(base64Str);
  // 把二进制字符串转成Uint8Array（pdf-lib需要的格式）
  const uint8Array = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }
  return uint8Array;
}

第二步：合并PDF并生成结果 #

下面是完整的合并函数，接收DataURL数组，既能生成合并后的DataURL，也能直接触发下载：

async function mergePdfDataUrls(pdfDataUrls) {
  // 从pdf-lib里拿到核心的PDFDocument类
  const { PDFDocument } = PDFLib;
  // 创建一个空的新PDF文档，用来放合并后的页面
  const mergedPdf = await PDFDocument.create();

  // 遍历所有输入的PDF DataURL
  for (const dataUrl of pdfDataUrls) {
    const pdfBytes = await dataUrlToPdfBytes(dataUrl);
    // 加载当前的PDF文档
    const sourcePdf = await PDFDocument.load(pdfBytes);
    // 把当前PDF的所有页面复制到合并文档里
    const copiedPages = await mergedPdf.copyPages(sourcePdf, sourcePdf.getPageIndices());
    copiedPages.forEach(page => mergedPdf.addPage(page));
  }

  // 把合并后的PDF导出成二进制数组
  const mergedPdfBytes = await mergedPdf.save();

  // 生成合并后的DataURL（如果需要用于后续请求，就用这个）
  const mergedDataUrl = `data:application/pdf;base64,${btoa(String.fromCharCode(...mergedPdfBytes))}`;
  console.log('合并完成的DataURL:', mergedDataUrl);

  // 直接触发下载（如果需要让用户下载合并后的PDF）
  const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
  const downloadUrl = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = 'merged_document.pdf';
  downloadLink.click();
  // 释放临时URL占用的内存
  URL.revokeObjectURL(downloadUrl);

  // 返回合并后的DataURL，方便后续使用
  return mergedDataUrl;
}

第三步：调用函数 #

假设你已经有了存储所有PDF DataURL的数组，直接调用就行：

// 示例：你的PDF DataURL数组
const myPdfDataUrls = [
  'data:application/pdf;base64,JVBERi0xLjMKJcfsj6IKNSAwIG9iago...',
  'data:application/pdf;base64,JVBERi0xLjMKJcfsj6IKNSAwIG9iago...',
  // 更多PDF的DataURL...
];

// 执行合并
mergePdfDataUrls(myPdfDataUrls);

一些关键提醒 #

• 关于pdf-lib的引入：你可以通过npm安装（npm install pdf-lib），或者把库文件下载到本地后引入，不用依赖外部CDN。
• 大文件处理：如果要合并的PDF很大，建议加个加载提示，避免用户以为页面卡死。
• 兼容性：现代浏览器都支持atob/btoa和Blob API，不用额外加兼容补丁。

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