vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue附件下载无法打开

vue附件下载无法打开的问题及解决

作者:王红珠

这篇文章主要介绍了vue附件下载无法打开的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue附件下载无法打开

描述

最近做了一个excel导出功能,在浏览器地址栏直接请求接口可以正常下载,但在vue项目里请求接口返回值为一堆乱码

如下图:

代码如下:

查阅资料后

知道需要将后端java返回的文件流处理为blob,并下载

代码如下:

现在文件可以导出了,但是导出的文件无法查看

如下图:

最终解决方案为在请求中添加 responseType: 'blob' 

代码如下:

const params = {
  siteId: this.siteId,
  beginDate: this.dateValue[0],
  endDate: this.dateValue[1]
}
axios.get('/ui/sacstatistics/getStatisticsExcel', { params, responseType: 'blob' }).then((res) => {
  const data = res.data
  let blob = new Blob([data], {
    type: 'application/vnd.ms-excel'
  })
  let url = window.URL.createObjectURL(blob)
  let a = document.createElement('a')
  a.href = url
  a.download = '网站内容更新统计.xlsx' // 自定义文件名称
  a.click()
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文