下载文件流
1.第一种
element-ui基础框架上的一个下载 {responseType: ‘Blob’}
代码封装在untils.js的一个单独文件中
/**
* 判断是否IE浏览器,为IE返回true
* @returns {boolean}
*/
isIE() {
let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
let isIE =
userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
let isIE11 =
userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE || isEdge || isIE11) {
return true;
} else {
return false; //不是ie浏览器
}
}
_webDownLoadFileConfirm(fileName, blob) {
if (!this.isIE()) {
// 非IE下载
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}
webDownLoadFile(fileName, blob) {
if (!fileName || !blob) {
return false;
}
if (!blob.type) {
Message.error("下载失败");
return false;
}
if (blob.type === "application/json") {
let reader = new FileReader();
reader.readAsText(blob, "utf-8");
reader.onload = () => {
let result = JSON.parse(reader.result);
if (result.result) {
this._webDownLoadFileConfirm(fileName, blob);
} else {
Message.error(result.info || "下载失败");
}
};
} else {
this._webDownLoadFileConfirm(fileName, blob);
}
}
使用:
第一步 :引入文件
import { utils } from "@utils/utils"; //博主自己的文件路径
第二步:在下载点击事件上面使用
downRowEvent() {
//请求接口将接口返回数据res {responseType: 'Blob'}使用就可以了
utils.webDownLoadFile(`名字`, res);
},
第二种:
const download = (id, name) => {
const aUrl = url + id
const a = document.createElement('a')
a.style.display = 'none'
a.href = aUrl
a.target = '_blank'
a.setAttribute('download', name)
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
引入使用
download(id, name)