vue生成excel文件,vue下载excel文件无法打开
最近vue项目满足了需求，客户端需要下载excel表格形式的数据。本文主要介绍了vue下载excel文件的四种方法，通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
1、通过url下载2、通过标签下载属性结合blob构造器下载3、通过js-file-download插件下载摘要4、使用fetch。
1、通过url下载
也就是后端提供文件的地址，直接用浏览器下载。
通过window.location.href=文件路径下载
window . location . href=` { location . origin }/operation/rule import/template ` 1
通过window.open(url， _blank )
window . open(` { location . origin }/operation/rule import/template `)
两种使用方法的区别：
Window.location:当前页面跳转，即当前页面重新定位；您只能在网站中打开本网站的页面。
Window.open:在新窗口中打开链接；你可以在网站上打开另一个网站的地址。
2、通过 a 标签 download 属性结合 blob 构造函数下载
标签A的下载属性是HTML5标准中新加入的，它的作用是触发浏览器的下载操作，而不是导航到下载的网址。该属性可以设置下载时要使用的新文件名。
创建前端超链接以接收后端文件流：
axios . get(`/operation/rule import/template `, {
ResponseType: blob //服务器响应的数据类型，可以是 array buffer 、 blob 、 document 、 json 、 text 、 stream ，默认值为 JSON
})。然后(res=
如果(！res)返回
Const blob=newblob ([res.data]，{ type: application/vnd . ms-excel })//构造一个blob对象来处理数据和设置文件类型。
if(window . navigator . mssaveropenbob){//IE10兼容
navigator . mssavelob(blob，this.filename)
}否则{
const href=url . createobject URL(blob)//创建新的URL来表示指定的blob对象
const a=document . createelement( a )//创建标记
a.style.display=none
指定下载链接
A.download=this.filename //指定下载文件名。
A.click() //触发下载
URL.revokeObjectURL(a.href) //释放URL对象
}
//这里可以直接从window.open(href)下载，不需要创建链接。
})。catch(错误={
console.log(错误)
})
注意：请求后台接口时，在请求头中添加{ response type: blob }；通过下载设置文件名时，可以直接设置扩展名。如果不是，浏览器将自动检测正确的文件扩展名并将其添加到文件中。
3、通过 js-file-download 插件
安装：
npm安装js文件下载
使用
从“js-file-download”导入文件下载
axios . get(`/operation/rule import/template `, {
response type:“blob”//返回的数据类型
})。然后(res={
文件下载(res.data，this.fileName)
})
4、使用fetch下载
exportFile() {
fetch( http://127 . 0 . 0 . 1:8765/course/export course/33 ，{
方法：“GET”，
邮件头：新邮件头({
授权:Cookie.get(授权)
}),
})。then(res=res.blob())。然后(data={
const blobUrl=window。URL.createObjectURL(数据)；
const a=document . createelement( a )；
a.download=this.fileName 。xlsx ；
a.href=blobUrl
a . click()；
});
},
总结
关于vue下载excel文件的四种方法的这篇文章到此为止。关于vue下载excel文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。