前端页面查看pdf，后端数据返回blob；blob与json格式转换

<a-drawer
      title="查看报告"
      width="520"
      :closable="false"
      :visible="visible"
      @update:visible="updateVisible"
      @close="close"
    >
     <a-spin tip="加载中..." :spinning="!pdfUrl">
       <iframe :src="pdfUrl" width="100%" style="height: 80vh;" />
     </a-spin>
     <a-button type="primary" style="margin-left: 400px" @click="close">关闭</a-button>
</a-drawer>

后端返回数据是blob时，调用接口时需要传参  responseType: 'blob'。否则会返回一大串的乱码

axios.get(url, {
    params: params,
    responseType: 'blob'
 }

axios设置responseType = 'blob'请求下载导出一个文件，请求成功时返回的是一个流形式的文件。但是请求失败的时候后端返回的是json ，不会处理错误信息，而是直接导出包含错误信息的文件。

 

接口返回正确时，res.type === 'application/pdf' 或其他文件形式

if (res.type === 'application/pdf') {
    this.pdfUrl = window.URL.createObjectURL(res)
}

 

接口返回错误时，会返回json格式，而不是blob格式了。但是我们调用接口时传了responseType: 'blob'。需要将blob转化为json格式。

const reader = new FileReader()
reader.readAsText(response.data, 'utf-8')
reader.onload = function() {
    JSON.parse(reader.result)
}

response.data是blob，如果不是就会报 Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

这里使用blob转json的方法后reader的值都为null，可能和返回数据有关。
解决方案：调用2次接口。第一次传参blob，返回数据报错，第二次不传blob，直接返回json。就是不够优雅



扩展:

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

FileReader.readAsText(file, [encoding]);
encoding常见有3种编码, asni,utf8,gbk2312.