前端 JS 经典：文件流下载

重点：调用接口时，一定要配置 responseType 的值为 blob，不然获取的文件流，不会转义成 blob 类型的文件。

1. 接口返回文件流

// BLOB (binary large object)----二进制大对象，是一个可以存储二进制文件的容器
// 下载接口：重点responseType: "blob"
// 返回体 res blob 文件流
function downloadFile(params) {return api({url: "/download/file",method: "get",params,responseType: "blob",});
}

2. 文件流下载：简单版

/*** 下载函数* @param {string} data - 后端获取的文件流* @param {string} name - 文件名*/
function downloadFile(data, name) {const blob = new Blob([data]);const url = window.URL.createObjectURL(blob);const a = document.createElement("a");a.href = url;a.download = name;document.body.appendChild(a);a.style.display = "none";a.click();document.body.removeChild(a);
}

3. 文件流下载：豪华版

/*** 全面优化下载函数*/
function downloadFile(res) {// 判断是否接口调用是否正常返回文件流const r = new FileReader();r.readAsText(res.data);r.onload = () => {try {// 报错，未返回const resData = JSON.parse(r.result);} catch (err) {// 正常，开始转换文件流// 正常情况，浏览器不返回字段为 content-disposition 的请求头，需要后端特殊声明下，才拿得到const name = res.headers["content-disposition"];const fileName = name.split("=")[1];// 解码filename = decodeURIComponent(fileName);// 兼容ie11if (window.navigator.msSaveOrOpenBlob) {try {const blobObject = new Blob([res.data]);window.navigator.msSaveOrOpenBlob(blobObject, fileName);} catch (e) {console.log(e);}return;}// a标签实现下载const url = window.URL.createObjectURL(new Blob([res.data]));const a = document.createElement("a");a.style.display = "none";a.href = url;a.download = filename;document.body.appendChild(a);a.click();resolve(fileName);document.body.removeChild(a);}};
}