vue-以文件流-blob-的形式-下载-导出文件操作
vue项目中，经常遇到文件导出与下载，有时候是直接返回服务端的文件url,这样直接以a链接下载，或者windown.open对不同类型的文件进行下载或预览。但如果返回的是文件流，则需要做一些其他处理，具体形式如下：
1、首先要确定服务器返回的数据类型。
在请求头中加入：config.responseType='blob'
有时候，不是所有接口都需要该类型，则可以对接口做一个判定：
//request拦截器
service.interceptors.request.use(
config=>{//根据接口判定
if(config.url==='/setting/exportData'||
config.url.indexOf('export')>-1||
config.url.indexOf('Export')>-1){
config.responseType='blob'//服务请求类型
}
if(getToken()){
config.headers['access_token']=getToken()
}
returnconfig
},
error=>{
//Dosomethingwithrequesterror
//console.log(error)//fordebug
Promise.reject(error)
}
)
2、接口请求获取后端返回的文件流
//导出
onExport(){
if(this.dataList===''){
this.$message({
type:'error',
message:'暂无数据导出'
})
return
}
constfd=newFormData()
fd.append('id',this.id)
varexportFileName='导出文件名'//设置导出的文件名，可以拼接一个随机值
exportData(fd)
.then(res=>{
//res.data是后端返回的文件流
//调用downloadUrl处理文件
downloadUrl(res.data,exportFileName)
})
.catch(err=>{
this.$message({
type:'error',
message:err.message
})
})
},
3、文件处理downloadUrl--该方法可以写为公共方法以便调用
//使用iframe框架下载文件--以excel为例，可修改type与fileName选择文件类型
exportfunctiondownloadUrl(res,name){
constblob=newBlob([res],{type:'application/vnd.ms-excel'})//构造一个blob对象来处理数据
constfileName=name+'.xlsx'//导出文件名
constelink=document.createElement('a')//创建a标签
elink.download=fileName//a标签添加属性
elink.style.display='none'
elink.href=URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()//执行下载
URL.revokeObjectURL(elink.href)//释放URL对象
document.body.removeChild(elink)//释放标签
}
4、在ie浏览器中存在兼容性问题，对downloadUrl做一些调整
//使用iframe框架下载文件-兼容性考虑
exportfunctiondownloadUrl(res,name){
constblob=newBlob([res],{type:'application/vnd.ms-excel'})
//forIE
if(window.navigator&&window.navigator.msSaveOrOpenBlob){
constfileName=name+'.xlsx'
window.navigator.msSaveOrOpenBlob(blob,fileName)
}else{
//forNon-IE(chrome,firefoxetc.)
constfileName=name+'.xlsx'
constelink=document.createElement('a')
elink.download=fileName
elink.style.display='none'
elink.href=URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
}
}
总结：至此，以文件流的形式导出文件的一种方式便已经实现。
补充知识：vue中使用文件流进行下载(newBlob),不打开一个新页面下载
我就废话不多说了，大家还是直接看代码吧~
exportfunctiondownload(url,params,filename){
Message.warning('导出数据中')
returnaxios.get(url,{
params:params,
responseType:'arraybuffer',
}).then((r)=>{
constcontent=r.data
constblob=newBlob([content],{type:'application/vnd.ms-excel'})
if('download'indocument.createElement('a')){
constelink=document.createElement('a')
elink.download=filename
elink.style.display='none'
elink.href=URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
Message.success('导出成功')
}
}).catch((r)=>{
console.error(r)
Message.error('导出失败')
})
}
以上这篇vue-以文件流-blob-的形式-下载-导出文件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。