vue后端传文件流转化成blob对象,前台点击下载返回undefined
后端返回文件流,接收传回来的response.data,使用URL.createObjectURL方法转化成blobURL,放入a标签中模拟点击下载后,没反应,打断点发现a.click()返回undefined,一开始还以为是blobURL不对,检查了好几天,感觉代码也没写错,结果发现,可能是之前封装的调接口的请求把后台传来的流blob对象字符串化了,所以点击不能下载,重新写一个原生请求,就可以下
·
后端返回文件流,接收传回来的response.data,使用URL.createObjectURL方法转化成blobURL,放入a标签中模拟点击下载后,没反应,打断点发现a.click()返回undefined,一开始还以为是blobURL不对,检查了好几天,感觉代码也没写错,结果发现,可能是之前封装的调接口的请求把后台传来的流blob对象字符串化了,所以点击不能下载,重新写一个原生请求,就可以下载了。
原文链接
附上我的代码:
function exportLogData(data, file_name) {
axios({
method: 'post',
url: serverIp + '/sysLog/download',
responseType: 'blob',
data,
headers: { 'Access-Control-Allow-origin': '*', 'Content-Type': 'application/json; charset=UTF-8', 'Token':JSON.stringify(getToken())}
}).then((res) => {
if (res && res.status === 200) {
const blob = new Blob([res.data])
let brower = '';
if (navigator.userAgent.indexOf('Edge') > -1){
brower = 'Edge'
}
if ('download' in document.createElement('a')){
if (brower === 'Edge') {
navigator.msSaveBlob(blob, file_name);
return
}
let url = window.URL.createObjectURL(res.data);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', file_name);
if(!document.getElementById(file_name)) {
document.body.appendChild(link);
}
link.click();
URL.revokeObjectURL(link.herf);
document.body.removeChild(link)
} else {
//IE10+下载
navigator.msSaveBlob(blob, file_name)
}
}
}).catch(error => {
console.log(error)
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)