React项目使用pdf-lib移除PDF图片后生成文件无法打开

核心问题分析 #

你当前生成的PDF无法打开，主要源于三个关键问题：

1. 响应数据编码错误：服务器端返回Uint8Array类型的PDF字节时，直接用res.send()会导致数据被错误编码，破坏PDF文件结构。
2. 错误的PDF处理逻辑：你没有修改原PDF，而是提取文本后新建了固定尺寸的单页PDF，不仅丢失原文档的页数、布局，还可能因文本溢出导致PDF结构损坏。
3. 响应头转义错误：Content-Disposition中的HTML转义字符"会导致浏览器解析文件名异常。

修复步骤 #

1. 修复服务器端响应处理 #

修改API路由的响应发送逻辑，将Uint8Array转为Buffer后发送，并修正响应头：

// 修改handler中的响应部分
try {
  const processedPdfBytes = await removeImagesFromPDF(pdfUrl);

  res.setHeader('Content-Type', 'application/pdf');
  // 修正文件名的转义问题
  res.setHeader('Content-Disposition', 'attachment; filename="processed.pdf"');
  // 将Uint8Array转为Buffer后发送，避免编码错误
  res.status(200).end(Buffer.from(processedPdfBytes));
} catch (error) {
  console.error('Error processing PDF:', error);
  res.status(500).json({ error: 'Failed to process the PDF' });
}

2. 替换错误的PDF处理逻辑（真正移除图片） #

原代码是提取文本重建PDF，并非“移除图片”的正确方式。正确做法是加载原PDF，遍历每一页移除图片对象，保留原文档的页数、页面尺寸和文本布局：

// 替换removeImagesFromPDF函数
async function removeImagesFromPDF(pdfUrl) {
  try {
    // 下载原PDF
    const response = await axios.get(pdfUrl, { responseType: 'arraybuffer' });
    const pdfBytes = new Uint8Array(response.data);

    // 加载原PDF文档
    const pdfDoc = await PDFDocument.load(pdfBytes);
    const pages = pdfDoc.getPages();

    // 遍历每一页，移除图片绘制指令
    pages.forEach(page => {
      const content = page.node.Contents;
      if (!content) return;

      // 解析页面内容流，过滤图片相关操作
      const contentStream = pdfDoc.context.register(content).decode();
      const filteredOperators = contentStream.operators.filter(op => {
        // 过滤掉绘制图片的Do指令
        if (op.name === 'Do') {
          const xObjectName = op.args[0];
          const xObject = page.node.Resources.getXObject(xObjectName);
          return xObject?.subtype !== 'Image';
        }
        return true;
      });

      // 重新生成页面内容流
      const newContentStream = pdfDoc.context.createContentStream(filteredOperators);
      page.node.Contents = pdfDoc.context.register(newContentStream);
    });

    // 保存修改后的PDF
    return pdfDoc.save();
  } catch (error) {
    console.error('Error processing PDF:', error);
    throw new Error('Error processing PDF: ' + error.message);
  }
}

3. 前端代码优化（可选） #

前端逻辑无致命问题，但可增加错误提示提升用户体验：

.catch((error) => {
  console.error('Error processing PDF:', error);
  alert('处理PDF失败，请检查URL是否有效');
  setProcessing(false);
});

额外注意事项 #

• 确保pdf-lib为最新版本，执行npm update pdf-lib即可，旧版本可能存在内容流解析bug。
• 测试时使用公开可访问的PDF URL，避免CORS问题导致axios无法下载PDF。
• 若原PDF为加密文档，需先添加解密逻辑（pdf-lib支持解密带密码的PDF）。

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