<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.
标签：返回,文件,格式,json,blob,reader,pdf From： https://www.cnblogs.com/zuojiayi/p/17164178.html