当前位置: 首页 > Web前端 > vue.js

前端js-vue从后台下载流文件(如excel)并设置下载文件名

时间:2023-03-31 19:18:09 vue.js

这里有两种方法,使用Blob对象和js-file-download下载的文件不会乱码,但是无论使用哪种方式,发送请求的时候都必须设置responseType。如果不打算直接使用,请跳转目录或直接点击。4.主要完整代码方法一:使用Blob对象Blob对象代表一个不可变的、类文件的原始数据对象。Blob不一定代表JavaScript原生格式的数据。File接口基于Blob,继承了blob的功能并对其进行了扩展以支持用户系统上的文件。1.Blob()构造函数取自:Blob()构造函数语法varaBlob=newBlob(array,options);参数数组是由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象组成的Array,或者其他类似对象体的混合体,会被放入blob中。DOMStrings将被编码为UTF-8。options是可选的,它可以指定以下两个属性:type,默认值为“”,表示将放入blob的数组内容的MIME类型。也就是设置文件类型。endings,默认值为“transparent”,用于指定包含行终止符n的字符串如何书写。它是两个值之一:“native”,这意味着行尾将更改为适合主机操作系统文件系统的换行符,或“transparent”,这意味着将保留blob中保存的结束字符不变。2、URL对象通过创建一个URL对象来指定文件的下载链接。//创建一个表示指定文件对象或Blob对象的新URL。让objectURL=window.URL.createObjectURL(blob);window.URL.revokeObjectURL(objectURL);//释放内存会在每次调用createObjectURL()方法时创建一个新的URL对象,即使您已经使用了相同的对象Created作为参数。当不再需要这些URL对象时,必须通过调用URL.revokeObjectURL()方法释放每个对象。浏览器会在文档退出时自动释放它们,但为了获得最佳性能和内存使用,您应该在安全时主动释放它们。3.使用a标签自定义文件名constlink=document.createElement('a');//生成一个标签。link.href=window.URL.createObjectURL(blob);//href属性指定下载链接link.download=fileName;//dowload属性指定文件名link.click();//click()事件触发download下载属性设置指定文件名时,直接设置扩展名即可。如果未设置,浏览器将自动检测正确的文件扩展名并将其添加到文件中。四:主要完整代码普通下载axios.post(postUrl,params,{responseType:'arraybuffer'}).then(res=>{//创建Blob对象,设置文件typeletblob=newBlob([res.data],{type:"application/vnd.ms-excel"})letobjectUrl=URL.createObjectURL(blob)//创建URLlocation.href=objectUrl;URL.revokeObjectURL(objectUrl);//释放内存})自定义下载文件名//使用a标签自定义下载文件名constlink=document.createElement('a')axios.post(postUrl,params,{responseType:'arraybuffer'}).then(res=>{//创建一个Blob对象并设置文件类型letblob=newBlob([res.data],{type:"application/vnd.ms-excel"})letobjectUrl=URL.createObjectURL(blob)//创建URLlink.href=objectUrllink.download='xxx'//自定义文件名link.click()//下载文件URL.revokeObjectURL(objectUrl);//释放内存})注意:下载指定扩展名的文件,只需要根据MIME设置类型即可参考手册。方法二:使用js-file-download安装npminstalljs-file-download--saveuseimportfileDownloadfrom'js-file-download'axios.post(postUrl,params,{responseType:'arraybuffer'}).then(res=>{fileDownload(res.data,'xxx.xls')})