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()
})

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Spring Boot 和 Vue 是一对非常流行的框架和库,分别用于后端和前端开发。而附件的分片上传和下载功能是一种常见的需求。 在后端使用 Spring Boot 可以很方便地实现附件的分片上传和下载功能。可以使用 Spring Boot 提供的文件上传功能,结合分片上传的思想,将一个大文件切分为多个小的文件片段进行上传。在前端使用 Vue 可以通过前端传输文件并将文件分片,将文件的每个片段按需发送给后端。 对于分片上传功能,后端可以使用 Spring Boot 的 MultipartResolver 接口接收前端传来的文件片段,并将其保存到临时位置。然后可以根据每个文件片段的顺序和文件唯一标识,将文件片段合并成完整的文件。这里可以使用 Apache Commons FileUpload 或者 Spring Boot 的 MultipartResolver 来实现。 对于分片下载功能,后端可以根据前端传来的文件标识和请求的文件片段进行处理。后端将文件切分为多个片段,然后根据前端传来的片段索引,返回对应的文件片段给前端前端接收到每个片段后,可以按顺序拼接成完整的文件。 需要注意的是在分片上传和下载过程中,要注意文件的完整性校验和数据一致性问题。可以考虑使用文件的 MD5 值来校验文件的完整性,前端每次上传或下载时,都需要带上文件的 MD5 值进行校验。 总结来说,Spring Boot 和 Vue 可以很好地实现附件的分片上传和下载功能。通过合理地切分文件和处理文件片段,可以提高上传和下载的效率和可靠性。 需要注意的是,以上只是一种实现思路,具体的实现方式还需要根据具体的业务需求和技术栈选择适合的工具和库来完成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值