前端 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 的请求头，      // 需要后端特殊声明下，才拿得到，response.setHeader("Access-Control-Expose-Headers","Content-Disposition");      const name = res.headers["content-disposition"];      const fileName = name.split("=")[1];      // 解码      filename = decodeURIComponent(fileName);      // 兼容ie11      if (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);    }  };}

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-15/158881.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！