使用react-pdf读取AWS S3中PDF并渲染至UI时遇‘无法读取PDF’错误

你的问题出在错误处理S3返回的PDF二进制数据上：你把data.Body转成了UTF-8字符串再转Blob，这会直接破坏PDF的二进制结构——PDF是二进制文件，不能用文本编码处理原始字节。

修正方案 #

直接用S3返回的data.Body（浏览器环境下是Uint8Array，本身就是二进制格式）创建Blob，不需要做任何字符串转换。另外推荐用Promise版的getObject，代码更简洁易维护：

const [file, setFile] = useState("");

useEffect(() => {
  const readFile = async () => {
    try {
      const s3Client = new AWS.S3();
      // 使用Promise版getObject替代回调写法
      const s3Data = await s3Client.getObject({
        Bucket: "Test",
        Key: "file/test.pdf",
      }).promise();
      
      // 直接用原始二进制数据创建Blob
      const blbfile = new Blob([s3Data.Body], { type: "application/pdf" });
      blbfile.lastModifiedDate = new Date();
      blbfile.name = "test.pdf";
      
      setFile(window.URL.createObjectURL(blbfile));
    } catch (err) {
      console.error("读取S3文件失败:", err);
    }
  };
  readFile();
}, []);

// 以下部分保持不变
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);

function onDocumentLoadSuccess({ numPages }) {
  setNumPages(numPages);
}
        
return(
  <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
    <Page pageNumber={pageNumber} />
  </Document>
)

额外优化方案 #

如果你的S3文件是公开可访问的，完全可以跳过手动下载转Blob的步骤，直接把S3文件的访问URL传给Document组件：

// 直接使用S3文件的公开URL
return(
  <Document file="https://your-bucket.s3.your-region.amazonaws.com/file/test.pdf" onLoadSuccess={onDocumentLoadSuccess}>
    <Page pageNumber={pageNumber} />
  </Document>
)

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