vue⽂件导出类型详解及处理⽅式
responseType值的类型可为如下
值数据类型
‘’DOMString(默认类型)
arraybuffer arraybuffer对象
blob Blob对象
document Document对象
JSON javaScripe object,parsed from a JSON string returned by the server
text DOMString
axios请求下载导出⼀个⽂件,请求成功时返回的是⼀个流形式的⽂件,需要设置responseType: ‘arraybuffer’,但是请求失败的需要返回的是json数据,
所以需要把arraybuffer转成Json对象。
例:
请求设置了responseType: ‘arraybuffer’,
请求成功时,下载⽂件,
请求失败时,后端返回json对象,如:{“msg”:“系统异常”,“code”:1,“success”:false},也被转成了arraybuffer 我的解决⽅案是,失败时,将数据arraybuffer转成Json对象就好了。 举个例:
this.downloadFile(params).then(res =>{
if(res.status ===200){
var disposition = res.headers['content-disposition']
var fileName =decodeURI(disposition.substring(disposition.indexOf('filename=')+9, disposition.length))<br> let blob =new Blob([r es.data],{ type:'application/pdf'})// 假设⽂件为pdf
let link = ateElement('a')
link.href = ateObjectURL(blob)
link.download = fileName
link.click()
}else{// 其它情况
}
}).catch(err =>{<br> var enc =new TextDecoder('utf-8')
var res =JSON.parse(enc.decode(new Uint8Array(err.data)))//转化成json对象
console.log(res)
}
)
vue+axios 如果你遇到导出⽂件破损或者乱码的情况
⼀定要检查⼀下你是否添加 responseType: ‘blob’ 或者 responseType: 'arraybuffer’
axios({// ⽤axios发送post请求
method:'post',
withCredentials:true,
url:url,// 请求地址
data: param,
responseType:'blob',//防⽌导出⽂件破损或乱码
headers:{'Content-Type':'application/json'}
}).then(res =>{
try{
var blob =new Blob([res.data]);
var filename = fileName;
var a = ateElement('a');
vuejson转对象var url =ateObjectURL(blob);
a.href = url;
a.download = filename;
var body = ElementsByTagName('body')[0]; body.appendChild(a);
a.click();
vokeObjectURL(url);
}catch(e){
}
})
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论