项目之前一直使用新窗口打开URL的形式下载文件
今天要求类似下图这样的需求：
1.未领取状态点击后调接口，返回pdf文件流并直接下载
2.下载后修改状态为已领取（前台修改，后台在下载的时候同时修改数据库的状态）
image.png
正常调用接口，传参数，返回值乱码（项目本身如果有状态码拦截，需要修改使其通过）
QQ图片20200618171732.png
this.Loading = this.$loading({
spinner: '',
text: '检验报告下载中...',
background: 'rgba(0, 0, 0, 0.6)'
})
downLoadReport({ reportNo: detail.reportNo }).then(response => {
this.Loading.close()
// 重点
let blob = new Blob([response], {
type: `application/pdf;charset-UTF-8` // word文档为msword,pdf文档为pdf
})
let objectURL = URL.createObjectURL(blob)
let downEle = document.createElement('a')
let fname = `${detail.deviceNo}检验报告` // 下载文件的名字
downEle.href = objectURL
downEle.setAttribute('download', fname)
document.body.appendChild(downEle)
downEle.click()
// 重点
detail.reportStatus === '1' && (detail.reportStatus = '2')
}).catch(error => {
console.log(error)
this.Loading.close()
})
之后可以下载成功，并且文件为pdf，但是打开为空白页
问题出在请求过程（本项目请求是封装好的，其实只要增加在请求参数中即可）
QQ图片20200618172823.png
responseType: "blob",
在请求中添加responseType: "blob"，用于设置返回值类型，当前请求要空白的情况就不会存在了
不加的情况，因为默认返回string类型，转为blob类型出现问题
