下载流

1a 直接请求

假如请求一个图片资源可以看到结果会是很长的一段字符串

1b 请求arraybuffer

这时需要添加配置，告诉服务器我们要的格式添加 responseType: "arraybuffer",

typescript

axios
  .get("http://localhost:8080/files/1.png", {
    responseType: "arraybuffer",
  })
  .then((res) => {
    console.log(res);
  });

这样我们收到的是 arraybuffer 的格式

下面开始处理响应

2 处理响应

下载方法

typescript

function downloadByArraybuffer(arraybufferData, filename) {
  let blob = new Blob([arraybufferData], {
    type: "application/octet-stream",
  });
  if ("msSaveOrOpenBlob" in navigator) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    let blobURL = window.URL.createObjectURL(blob);
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = blobURL;
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(blobURL);
  }
}

然后结合请求

typescript

axios
  .get("http://localhost:8080/files/1.png", {
    responseType: "arraybuffer",
  })
  .then((res) => {
    const filename = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxx";
    downloadByArraybuffer(res.data, filename);
  });

获取filename

可以查看响应数据的 header 一般是在 content-disposition 这个字段会有文件名截取出来即可没有的话，后端弄一下

typescript

const disposition = res.headers["content-disposition"];
const filename =
  disposition && disposition.includes("=") ? disposition.split("=")[1] : "";

3 完整代码

typescript

axios
  .get("http://localhost:8080/files/1.png", {
    responseType: "arraybuffer",
  })
  .then((res) => {
    const disposition = res.headers["content-disposition"];
    const filename =
      disposition && disposition.includes("=") ? disposition.split("=")[1] : "";
    downloadByArraybuffer(res.data, filename);
  });

/**
 * 下载方法
 * @params
 */
function downloadByArraybuffer(arraybufferData, filename) {
  let blob = new Blob([arraybufferData], {
    type: "application/octet-stream",
  });
  if ("msSaveOrOpenBlob" in navigator) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    let blobURL = window.URL.createObjectURL(blob);
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = blobURL;
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(blobURL);
  }
}

4 边缘情况

对于文本的处理

typescript

const data:ArrayBuffer = xxxxx
const blob = new Blob([data]);
const fileReader = new FileReader();
fileReader.readAsText(blob, "utf-8");
fileReader.onload = () => {
  // 结果
  console.log(JSON.parse(fileReader.result)),
};

blob 处理二进制文件

const blob = new Blob([res.data], { type: "application/xz" });