前端 JS 经典：文件流下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端 JS 经典：文件流下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

重点：调用接口时，一定要配置 responseType 的值为 blob，不然获取的文件流，不会转义成 blob 类型的文件。文章来源地址https://www.toymoban.com/news/detail-777293.html

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);
    }
  };
}

到了这里，关于前端 JS 经典：文件流下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！