vue + axios下载pdf文件流遇到的“乱码”和“内容空白”问题

项目之前一直使用新窗口打开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类型出现问题