通过Web API加载PDF时react-pdf报错，本地文件系统加载正常

看起来你遇到的问题很典型——浏览器能正常解析的PDF，react-pdf却报无效字符和结构错误。这通常是因为Web服务的响应配置不符合react-pdf依赖的pdf.js worker的严格要求，下面是一步步的排查和解决方法：

先排查Web服务的响应头 #

浏览器对PDF的解析容错性很高，但pdf.js的worker需要严格符合标准的响应：

• 检查Content-Type：在浏览器开发者工具的Network标签里，找到加载PDF的请求，确认Response Headers里的Content-Type是application/pdf，而不是text/plain、application/octet-stream或者其他类型。如果类型不对，react-pdf的worker会把文件当成文本解析，自然会出现无效字符。
• 检查响应编码：确保服务没有给PDF文件添加文本编码（比如Content-Encoding: utf-8），PDF是二进制文件，不需要文本编码，一旦被转码就会出现乱码和无效字符。

修改react-pdf的加载方式 #

如果直接传URL给Document组件不行，试试手动获取二进制数据再传入，绕开可能的响应解析问题：

import { Document, Page } from 'react-pdf';
import { useState, useEffect } from 'react';

export default function WebServicePdfViewer() {
  const [pdfBlob, setPdfBlob] = useState(null);

  useEffect(() => {
    const loadPdf = async () => {
      try {
        const response = await fetch('你的Web服务PDF地址');
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        
        // 确认返回的是PDF类型
        const contentType = response.headers.get('Content-Type');
        if (!contentType.includes('application/pdf')) {
          throw new Error(`返回内容不是PDF：${contentType}`);
        }

        // 获取二进制数组并转为Blob
        const arrayBuffer = await response.arrayBuffer();
        const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
        setPdfBlob(blob);
      } catch (err) {
        console.error('加载PDF出错：', err);
      }
    };

    loadPdf();
  }, []);

  if (!pdfBlob) return <div>加载PDF中...</div>;

  return (
    <Document file={pdfBlob}>
      <Page pageNumber={1} />
    </Document>
  );
}

调整Web服务的输出配置 #

根据你的服务类型，确保正确输出PDF：

• ASP.NET/C#：返回FileResult时明确指定ContentType：

public IActionResult GetPdf()
{
    byte[] pdfBytes = // 你的PDF字节数组
    return File(pdfBytes, "application/pdf", "document.pdf");
}

• Node.js/Express：设置正确的响应头再发送二进制数据：

app.get('/api/pdf', (req, res) => {
    const pdfBuffer = // 你的PDF Buffer
    res.setHeader('Content-Type', 'application/pdf');
    // 可选：设置下载头，如果需要的话
    // res.setHeader('Content-Disposition', 'inline; filename="document.pdf"');
    res.send(pdfBuffer);
});

• 避免不必要的中间件干扰：比如压缩中间件可能会错误处理二进制PDF，确保压缩只针对文本类内容（比如HTML、JS、CSS），跳过PDF：

// Express压缩中间件的示例配置
const compression = require('compression');
app.use(compression({
    filter: (req, res) => {
        // 不对PDF应用压缩
        if (res.getHeader('Content-Type') === 'application/pdf') {
            return false;
        }
        return compression.filter(req, res);
    }
}));

其他可能的修复点 #

• 升级react-pdf版本：旧版本可能存在一些兼容性问题，运行npm install react-pdf@latest升级到最新稳定版试试。
• 检查跨域设置：如果Web服务和前端不在同一个域，确保服务配置了正确的CORS头，允许前端访问（浏览器能访问说明CORS大概率没问题，但还是确认下）。

为什么浏览器能打开但react-pdf不行？因为浏览器内置的PDF阅读器有很强的容错机制，能忽略一些格式不规范或者响应头错误，但react-pdf依赖的pdf.js worker是严格按照PDF规范解析的，一点点不符合就会抛出错误。

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