クラシックなフロントエンド 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);
      // 兼容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);
    }
  };
}