Vue实现文件下载
Vue文件下载的简单实现
·
前端新人一枚,诸多技术还在学习,各种原理尚不了解,如有错误请大佬指正
将该方法绑定到按钮的点击事件上,即可实现文件下载
Download(){
axios
.post('接口',{
//如果没有要传给后台的数据这里可以为空,但最好留着这个花括号,不然后台可能将response当做数据
},{
responseType:'blob',
},{
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
})
.then((response)=>{
console.log(response);
//headers请求头的乱码数据转换为中文
const fileName = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1])
//下载文件
let blob = new Blob([response.data], {type: "application/vnd.ms-excel"})
let objectUrl = URL.createObjectURL(blob) // 创建URL
const link = document.createElement('a')
link.href = objectUrl
// link.download = '.xlsx'// 自定义文件名
//这里是获取后台传过来的文件名
link.setAttribute("download",fileName)
link.click() // 下载文件
URL.revokeObjectURL(objectUrl) // 释放内存
})
.catch((error)=>{
console.log(error);
alert('下载失败')
})
},
关于文件下载还有很多方法,我所分享的只是其中一种
更多推荐
已为社区贡献1条内容
所有评论(0)