前端处理二进制流文件

/**
 * @function downloadUrlFile()
 * @method XMLHttpRequest.open(method,URL,async,username,password)
 * @param { string } method     - 用于请求的 HTTP 方法。值包括 GET 、POST、HEAD、PUT、DELETE（不区分大小写）
 * @param { string } URL        - 请求的主体
 * @param { boolean } async     - 指示该请求是否应该异步执行 true-异步 false-同步
 * @param { string } username   - 可选。为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格
 * @param { sting } password    - 可选。为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格
 * @author: FORTUNATE
 * @date: 2021-12-17 09:55:29
 * @description:method   - 创建http请求，说明XMLHttpRequest对象从哪里获取数据
 * @description:function - 将二进制数据流转为文件下载
*/
export function downloadUrlFile(url, fileName) {
  const url2 = url.replace(/\\/g, "/");
  // 创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest();
  // 创建http请求，说明XMLHttpRequest对象从哪里获取数据 => XMLHttpRequest.open()
  xhr.open("GET", url2, true);
  // XMLHttpRequest.responseType 设置响应类型 => blob(一个包含二进制的Blob对象)
  xhr.responseType = "blob";
  // 为了避免大文件影响用户体验，建议加loading
  xhr.onload = () => {
    // 判断XMLHttpRequest对象异步请求是否成功结束
    if (xhr.status === 200) {
      // 获取文件blob数据并保存
      saveAs(xhr.response, fileName);
    }
  };
  // HTTP 请求发到Web 服务器上去
  xhr.send();
}
function saveAs(data, name) {
  const urlObject = window.URL || window.webkitURL || window;
  // document.createElementNS() 创建一个带有命名空间的元素节点
  const save_link = document.createElementNS("http://www.w3.org/1999/xhtml","a");
  save_link.href = urlObject.createObjectURL(new Blob([data]));
  save_link.download = name;
  save_link.click();
}

以上就是前端处理文件流的方式。