React中后端返回文件流，前端展示PDF

1.安装PDFObject插件

npm i pdfobject

2.导入

import PDFObject from 'pdfobject'

3.获取后端文件流

$post(1000165, { projectId: value.pid, month: newStr, reportType: "pdf" }, { responseType: "arraybuffer" })//请求
        .then((data) => {
            let judge = this.transformation(data)
            if (judge.success) {
              let oArrayBuffer = data.data;//文件流
              let blob = new Blob([oArrayBuffer], { type: "application/pdf" });//将生成blob
              let testUrl = window.URL.createObjectURL(blob)//转成链接
              PDFObject.embed(testUrl, '.bottom-pdf')//第一个参数是转换好的链接，第二个参数是className
            } else {
              message.error("文件不存在");
            }
        })
    })

4.在render()中书写返回结构

render(){
    return(
    <React.Fragment>
         <div className="bottom-pdf">//将PDF文件渲染到这个节点
          </div>
    </React.Fragment>
    )
}

到这个步骤已经能展示出PDF文件了

5.PDFObject插件文档

插件文档

6.开发中遇到的问题

一、

• 在开发中遇到比较棘手的问题，后端文件流返回渲染成功后，展示的是空白，原因就是要请求文件流类型的接口，需要把responseType设置为arraybuffer，否则就会渲染空白，这方面的问题在百度也比较难查到，是一个需要注意的点。

二、

• 当请求返回文件流接口成功时，能够正常渲染。
• 当请求请求文件流接口失败时，因为请求时responseType被设置为了arraybuffer，所以后端返回的失败参数如{"success":"false","code":"200","message":"无文件"}，也会被转换arraybuffer，此时请求成功和失败返回的http状态码都是200，并且无法拿到请求失败的参数

解决方案：要将arraybuffer类型数据转换成JSON对象，然后进行判断，这部分自行百度，arraybuffer转JSON对象，这里也有比较多的坑，因为百度的许多方法转换后messgae:无文件，这个中都会是乱码。