vue附件下载无法打开的问题及解决
更新时间：2024年07月27日 10:30:21 作者：王红珠
这篇文章主要介绍了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()
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue3.2自定义弹窗组件结合函数式调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
如何解决element-ui中多个table在tab切换时出现宽度缩小问题
这篇文章主要介绍了如何解决element-ui中多个table在tab切换时出现宽度缩小问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue和js中实现模糊查询方式，具有很好的参考价值，希望对大家有所帮助。也希望大家多多支持脚本之家2022-08-08
这篇文章主要为大家介绍了vue electron实现无边框窗口示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要大家介绍了查看当前vue项目所需Node.js版本的方法,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
vue使用富文本编辑器vue-quill-editor的操作指南和注意事项
vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue使用富文本编辑器vue-quill-editor的操作指南和注意事项,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue使用file-saver插件保存各种格式文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了基于Vue SEO的四种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要为大家介绍了Backbone前端框架核心及源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
在 Vue 应用中,组件间通信是构建复杂应用时的一个常见需求,Vue3.x 提供了provide和inject API,让跨组件通信变得更加简洁和高效,本文将深入探讨如何使用provide和inject在Vue3.x中实现跨组件通信,并通过示例代码一步步进行说明,需要的朋友可以参考下2024-03-03
最新评论