前端下载二进制流文件为excel文件
情景提示:请求后台接口。后台返回二进制流。前端实现浏览器自动下载成exlce文件。项目框架Vue。主要知识点:Blob对象。h5新特性download/**封装函数 downLoadFile.js*params:*data:二进制文件*/exports.install = function (Vue, options){Vue.prototype.d...
·
情景提示:
请求后台接口。
后台返回二进制流。
前端实现浏览器自动下载成exlce文件。
项目框架Vue。
主要知识点:Blob对象。h5新特性 download
/*
*封装函数 downLoadFile.js
*params:
*data:二进制文件
*/
exports.install = function (Vue, options){
Vue.prototype.downloadFile =function(data){
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'excel1111.xlsx')
document.body.appendChild(link)
link.click()
};
}
//---发送请求 获取二进制流
this.$http.post(this.baseUrl+"/api/v1/statistic/export/event/817BA83027DA43F491486829E668DBEC",
{
startTime:time[0],
endTime:time[1]
},
//--headers和responseType一定要在一起设置,否则会导致 获取到的二进制文件流 格式不正确
{
headers: {
'content-type': 'application/json; charset=utf-8',
'token':sessionStorage.getItem("tokens"),
},
responseType: 'blob' //--设置请求数据格式
})
.then((res)=>{
// console.log(res);
this.downloadFile(res.data); //---调用函数
}).catch((erro)=>{
console.log("erro-----",erro);
})
更多推荐
已为社区贡献8条内容
所有评论(0)