React调用jsPDF从Blob生成PDF失败，提示加载PDF文档出错

我帮你排查了问题根源，你遇到的PDF加载失败主要来自两个关键错误：一是对后端返回的Buffer序列化数据处理不正确，二是错误调用了jsPDF的output方法。下面是完整的修复方案：

问题分析 #

你传入组件的props.blob是Node.js Buffer被JSON序列化后的对象（结构为{type: "Buffer", data: Array(94869)}），但你在pdfGenerator里的处理逻辑有问题：

• 错误地把doc.output当成数组调用（实际上doc.output是一个方法）
• 没有把后端返回的Buffer数组转换成前端能识别的二进制格式

修复后的代码 #

class DownloadPdf extends Component {
  constructor(props) {
    super(props)
    this.pdfGenerator = this.pdfGenerator.bind(this)
  }

  pdfGenerator(bufferObj){
    // 将后端返回的Buffer数组转换为前端可识别的Uint8Array
    const pdfBinary = new Uint8Array(bufferObj.data);
    // 用二进制数据直接创建PDF Blob
    const pdfBlob = new Blob([pdfBinary], { type: 'application/pdf' });
    const pdfUrl = URL.createObjectURL(pdfBlob);
    
    // 打开PDF窗口，并在加载完成后释放临时URL（避免内存泄漏）
    const pdfWindow = window.open(pdfUrl);
    if (pdfWindow) {
      pdfWindow.onload = () => {
        URL.revokeObjectURL(pdfUrl);
      };
    }
  }

  render() {
    return (
      <td>
        <button onClick={() => this.pdfGenerator(this.props.blob)}>
          Download PDF
        </button>
      </td>
    )
  }
}

关键修改说明 #

1. 正确转换Buffer数据：后端序列化的Buffer数组需要转换成Uint8Array，这是前端处理二进制数据的标准格式，Blob才能正确识别为PDF文件。
2. 移除多余的jsPDF操作：你已经有现成的PDF二进制数据，完全不需要用jsPDF创建空文档，直接用拿到的二进制生成Blob即可，这才是打开已有PDF的正确姿势。
3. 预防内存泄漏：调用URL.revokeObjectURL可以在PDF窗口加载完成后释放临时URL，避免浏览器长期占用不必要的内存。

另外，建议你检查父组件的axios请求，确保后端返回的pdf_blob是完整的PDF二进制数据（没有被错误编码）。如果后端用Node.js开发，要确保响应头设置了Content-Type: application/json，并且Buffer被正确序列化为JSON格式。

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