如何将axios返回的application/pdf响应转换为文件供react-pdf使用

前置要求 #

调用API时必须正确配置响应类型为blob，否则拿到的乱码无法正常解析。

方案1：转Blob URL（性能优先，推荐） #

Blob URL是浏览器生成的临时本地链接，内存占用低，适合大多数展示场景：

• 核心代码（fetch版本）

const getPdf = async () => {
  const response = await fetch('你的API接口地址', {
    method: 'GET', // 按接口要求改POST或其他方法
    headers: {
      // 按需补充鉴权、自定义请求头等
    }
  })
  // 转换响应为Blob对象
  const pdfBlob = await response.blob()
  // 生成临时可访问链接
  const pdfUrl = URL.createObjectURL(pdfBlob)
  // 存入state供react-pdf调用
  setPdfFile(pdfUrl)
}

• 内存释放：组件卸载时需要销毁临时链接避免内存泄漏

useEffect(() => {
  return () => {
    if (pdfFile) URL.revokeObjectURL(pdfFile)
  }
}, [pdfFile])

方案2：转Base64（适合需要持久化存储的场景） #

如果需要把PDF内容存到本地缓存或者传给其他模块，可转成Base64格式：

const getPdfBase64 = async () => {
  const response = await fetch('你的API接口地址', {
    // 同上配置请求参数
  })
  const pdfBlob = await response.blob()
  const fileReader = new FileReader()
  fileReader.readAsDataURL(pdfBlob)
  fileReader.onloadend = () => {
    // 拿到的结果就是标准dataUrl格式的Base64，可直接传给react-pdf
    setPdfFile(fileReader.result)
  }
}

Axios请求适配 #

如果用Axios发送请求，需要额外添加responseType配置：

const res = await axios.get('你的API接口地址', {
  // 必须添加该配置，否则返回乱码无法解析
  responseType: 'blob',
  headers: {
    // 按需补充请求头
  }
})
// res.data即为Blob对象，后续转URL或Base64的逻辑和上述方案完全一致

react-pdf调用示例 #

拿到处理好的资源后直接传给Document组件的file属性即可：

import { Document, Page } from '@react-pdf/renderer'

function PdfPreview() {
  const [pdfFile, setPdfFile] = useState(null)

  // 这里放上面的获取PDF逻辑

  return (
    pdfFile && <Document file={pdfFile}>
      <Page pageNumber={1} />
      {/* 按需渲染多页 */}
    </Document>
  )
}

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