前端实现文件流下载【axios】

以下是一个拿到流数据后的下载操作代码实现

// download.js


// 处理下载流
export const download = (content, fileName) => {
  const blob = new Blob([content]); // 创建一个类文件对象：Blob 对象表示一个不可变的、原始数据的类文件对象
  // URL.createObjectURL(object) 表示生成一个 File 对象或 Blob 对象
  const url = window.URL.createObjectURL(blob);
  const dom = document.createElement("a"); // 设置一个隐藏的 a 标签，href 为输出流，设置 download
  dom.style.display = "none";
  dom.href = url;
  dom.setAttribute("download", fileName); // 指示浏览器下载 url,而不是导航到它；因此将提示用户将其保存为本地文件
  document.body.appendChild(dom);
  dom.click();
  document.body.removeChild(dom); // 下载完成移除元素
  window.URL.revokeObjectURL(url); // 释放掉 blob 对象
};

/**
 * 获取http响应的文件名
 * @param {*} str http响应header中content-disposition字段
 * @returns
 */
export const getFileName = (str) => {
  const arr = str.split(";");
  // filename*=
  let temp = arr.find((e) => e.startsWith("filename*="));
  if (temp) {
    // 默认utf-8模式
    const index = temp.lastIndexOf("'");
    return decodeURIComponent(temp.slice(index + 1));
  }
  // filename=
  temp = arr.find((e) => e.startsWith("filename="));
  if (temp) {
    return temp.replace("filename=", "");
  }
  throw Error(
    "未在响应头获取到文件名（请检查响应头字段大小写），且默认自定义文件名未传！！"
  );
};

/**
 * 处理下载流
 * @param {*} response 完整的http响应
 * @param {*} fileName 自定义的文件名（如果没传从response中拿到）
 */
export const downloadV2 = (response, fileName = false) => {
  const name = fileName ? fileName : response.headers["content-disposition"];
  let filename = "";
  try {
    filename = getFileName(name);
  } catch (error) {
    console.error(error);
    return;
  }
  const blob = new Blob([response.data]); // 创建一个类文件对象：Blob 对象表示一个不可变的、原始数据的类文件对象
  // URL.createObjectURL(object) 表示生成一个 File 对象或 Blob 对象
  const url = window.URL.createObjectURL(blob);
  const dom = document.createElement("a"); // 设置一个隐藏的 a 标签，href 为输出流，设置 download
  dom.style.display = "none";
  dom.href = url;
  dom.setAttribute("download", filename); // 指示浏览器下载 url,而不是导航到它；因此将提示用户将其保存为本地文件
  document.body.appendChild(dom);
  dom.click();
  document.body.removeChild(dom); // 下载完成移除元素
  window.URL.revokeObjectURL(url); // 释放掉 blob 对象
};

axios遇到流下载异常返回JSON时的处理

    // 如果是下载文件流报错，转换错误信息为json响应
    if (responseType === "blob") {
      let resBlob = res.data;
      return new Promise(function (resolve) {
        let reader = new FileReader();
        reader.readAsText(resBlob, "utf-8");
        reader.onload = () => {
          let ress = JSON.parse(reader.result);
          if (ress.code !== 0) {
            // 提示错误的信息
            Message({
              showClose: true,
              message: ress.msg,
              type: "error",
            });
            return resolve(ress);
          }
        };
      });
    }