前端 JS 经典:文件流下载

简介: 前端 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);
    }
  };
}


目录
相关文章
|
6月前
|
JavaScript 前端开发 API
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
226 8
|
6月前
|
JavaScript 前端开发 容器
|
6月前
|
JavaScript 前端开发
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
移动开发 JavaScript 前端开发
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
|
6月前
|
JavaScript 前端开发