如何在React中用JavaScript将接口返回的PDF字节流转换为可下载文件

核心注意事项 #

你拿到的响应是PDF的原始二进制流，请求时必须按二进制格式解析响应，用默认的文本/JSON格式解析会直接导致文件损坏无法打开。

实现步骤 #

• 发送POST请求时按二进制格式解析响应内容
• 将响应内容封装为Blob对象，指定MIME类型为application/pdf
• 通过URL.createObjectURL生成临时下载链接
• 动态创建a标签触发浏览器下载行为
• 下载完成后释放临时URL资源，避免内存泄漏

代码示例 #

基于原生fetch API的实现 #

const downloadPdf = async () => {
  try {
    const res = await fetch('你的接口地址', {
      method: 'POST',
      body: JSON.stringify({
        // 你的请求参数
      }),
      headers: {
        'Content-Type': 'application/json',
        // 其他自定义请求头，比如授权token等
      }
    })
    // 直接将响应解析为二进制blob
    const blob = await res.blob()
    // 生成临时下载链接
    const tempUrl = window.URL.createObjectURL(blob)
    // 动态创建a标签触发下载
    const aTag = document.createElement('a')
    aTag.href = tempUrl
    aTag.download = '123.pdf' // 自定义下载文件名
    document.body.appendChild(aTag)
    aTag.click()
    // 清理资源
    document.body.removeChild(aTag)
    window.URL.revokeObjectURL(tempUrl)
  } catch (err) {
    console.error('PDF下载失败：', err)
  }
}

// 组件内绑定到点击事件即可
// <button onClick={downloadPdf}>下载PDF</button>

基于axios的实现 #

import axios from 'axios'

const downloadPdf = async () => {
  try {
    const res = await axios.post('你的接口地址', {
      // 你的请求参数
    }, {
      // 关键配置：提前指定响应类型为二进制blob
      responseType: 'blob'
    })
    // 手动指定MIME类型，避免后端响应头错误导致的文件异常
    const blob = new Blob([res.data], { type: 'application/pdf' })
    const tempUrl = window.URL.createObjectURL(blob)
    const aTag = document.createElement('a')
    aTag.href = tempUrl
    aTag.download = '123.pdf'
    aTag.click()
    window.URL.revokeObjectURL(tempUrl)
  } catch (err) {
    console.error('PDF下载失败：', err)
  }
}

常见问题排查 #

如果下载后的PDF无法打开，优先排查两个点：

• axios请求有没有加responseType: 'blob'配置，90%的异常都是漏了这个配置
• 确认后端返回的二进制流是完整的，没有被代理、网关等中间层截断

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