后端输出流文件时,浏览器不保存文件,不弹下载框
目录
后端输出流文件时，浏览器不保存文件，不弹下载框
实践得知：通过ajax请求后端时，浏览器不会保存文件。因为ajax不支持返回二进制流。 我用的是axios也不行
解决方法：
//导出
xxx(){
console.log(this.data2)
Vue.prototype.$axios({
xhrFields: {
withCredentials: false
},
method:'post',
url: 你的apiurl,
responseType: 'blob',//不加这个responseType时，下载的文件可能乱码
data:this.data2
})
.then((res) =>{
console.log(res)
let blob = new Blob([res.data]);
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = 'report.zip'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})
},这样就会把后端返回的流转换为blob 然后下载
具体这个“ responseType: ‘blob’ ”代表什么：
参考文献：http://www.axios-js.com/zh-cn/docs/index.html
表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’。
当然里面的东西，请大家自己参考实际当中自行修改。
参考链接：https://www.cnblogs.com/shangguancn/p/14789220.html