将多个PDF Blob合并为一个：仅显示最后一个PDF的问题求助

我之前也碰到过一模一样的问题！这种情况大概率是你的合并逻辑没有正确地把每个PDF的页面追加到目标文档里，反而每次都覆盖了之前的内容。下面是基于pdf-lib库的实用解决方案，这是前端处理PDF合并最常用的工具之一：

第一步：准备好pdf-lib #

如果是在项目里使用，可以通过npm安装：

npm install pdf-lib

要是想直接在浏览器中使用，引入CDN即可：

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

第二步：编写合并函数 #

这个异步函数会逐个读取每个PDF Blob，提取其中所有页面，然后合并到一个新的PDF文档中：

async function mergePdfBlobs(pdfBlobs) {
  // 创建一个空的PDF文档作为合并后的目标载体
  const mergedPdf = await PDFLib.PDFDocument.create();

  // 遍历每一个待合并的PDF Blob
  for (const blob of pdfBlobs) {
    // 将Blob转换为ArrayBuffer格式，方便pdf-lib读取解析
    const arrayBuffer = await blob.arrayBuffer();
    // 加载当前待合并的PDF文档
    const pdf = await PDFLib.PDFDocument.load(arrayBuffer);
    
    // 复制当前PDF的所有页面到合并文档中
    const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
    pages.forEach(page => mergedPdf.addPage(page));
  }

  // 将合并完成的文档转换为ArrayBuffer，再转为Blob格式返回
  const mergedPdfBytes = await mergedPdf.save();
  return new Blob([mergedPdfBytes], { type: 'application/pdf' });
}

第三步：调用合并函数 #

你可以像下面这样使用这个函数，获取最终合并好的Blob并处理：

// 假设pdfBlobs是你要合并的多个PDF Blob组成的数组
mergePdfBlobs(pdfBlobs)
  .then(mergedBlob => {
    // 这里可以对合并后的Blob做下载、预览等操作
    const previewUrl = URL.createObjectURL(mergedBlob);
    window.open(previewUrl); // 在新窗口打开预览
  })
  .catch(error => {
    console.error('合并PDF时出错了:', error);
  });

常见问题排查点 #

• 如果还是只显示最后一个PDF，检查循环是否用了普通for循环而非for...of，异步操作顺序混乱也会导致这个问题。
• 确认每个输入的Blob确实是有效的application/pdf类型，可通过blob.type验证。
• 如果某个PDF损坏或无法解析，会导致合并失败，建议在循环中添加错误捕获，要么跳过无效PDF，要么提示用户处理。

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