在vue里面实现前端下载功能
上篇文章地址:juejin.cn/post/684490…
文件下载：
文件下载通常有几种方法
1.通过url下载
2.location.href
3.form提交直接下载
4.HTML5 a.download结合blob对象进行下载 :
a标签的download是HTML5标准新增的属性，作用是指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
这种是定义的接口不是下载文件的路径，而是通过API可以获得文件的内容，由前端把内容写入到文件中，这种方法是通过获取文件信息，在网页上利用click事件，创建一个文件，然后将文件信息写入到文件中，然后保存
------------
最近做后台管理系统,需要用到导出下载报表的功能,然鹅后台返回给我的是这个东东,而不是链接!刚开始一脸懵逼!
因为项目是基于vue的，而且提交的请求参数涉及很多参数，比较复杂，还是用post方式传输的,所以采用了方法四来实现!
downloadPlanList(this.planList).then(res => {
// console.log(res, 6141544)
if (res.data.code !== 1044) {
let blob = new Blob([res.data], {
type: "application/msword" // 将会被放入到blob中的数组内容的MIME类型
});
// 兼容IE10
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, "土地物业巡查计划表.doc");
}
// 兼容谷歌和火狐
else {
let objectUrl = URL.createObjectURL(blob);
let downloadLink = document.createElement("a");
downloadLink.href = objectUrl;
downloadLink.download = "土地物业巡查计划表.doc";
// 兼容火狐
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
// 释放内存
window.URL.revokeObjectURL(downloadLink.href);
this.$nextTick(() => {
setTimeout(() => {
this.$message.success("下载成功!");
}, 4000);
});
}
} else {
this.$message.error(res.data.msg);
}
});
