vue附件下载无法打开

王红珠

于 2022-07-14 16:37:12 发布

阅读量1.4k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44717761/article/details/125787392

版权

在Vue项目中，通过axios请求接口下载Excel文件时遇到了返回乱码的问题。解决方法是在请求时设置responseType为'blob'，然后将返回的文件流转化为Blob对象，创建URL并利用a标签实现下载。最终成功导出并能正常打开Excel文件。

摘要由CSDN通过智能技术生成

描述：最近做了一个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()
})

完美解决！给遇到同样问题的小伙伴参考一下~