vue如何实现文件下载,

　　本文主要介绍如何在vue中下载excel流文件并设置下载文件名。对vue感兴趣的同学可以参考一下。

目录

　　概述1。通过url 2下载。通过标签下载属性结合blob构造器3下载。通过js-文件-下载插件下载

概述

　　导出excel的需求。当你点击下载模板或者下载反馈结果时，axios发起后端接口请求，得到响应时返回的数据是乱码，如图：

　　总结以下处理方法。

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)

　　})

　　以上是如何在vue中下载excel流文件和设置下载文件名的详细内容。关于下载excel流文件和在vue中设置下载文件名的更多信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。