vue根据路径下载文件/根据文件流下载文件

实现过程

// 下载
export const useFileDownload = (url, name) => {
  const x = new XMLHttpRequest();
  x.open("GET", url, true);
  x.responseType = "blob";
  x.onload = (e) => {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    a.download = name || "附件文件";
    a.click();
  };
  x.send();
};

//文件流下载
const sampleDownload=async()=>{
  const res = await 接口();
  if(res){
    const elink = document.createElement("a");
      elink.download = "信息模板.xlsx";
      elink.style.display = "none";
      const blob = new Blob([res], { type: "application/x-msdownload" });
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
  }
}

//封装好的方法（通过响应头内获取文件名称   注意接口设置responseType: 'blob', getResponse: true）
export const downloadBlobWithResponse = (res) => {
  let fileName = '';
  const content = res.response.headers.get('content-disposition');

  if (content) {
    if (content.includes('utf-8') || content.includes('UTF-8')) {
      const name = content?.split('utf-8')?.[1] ?? content?.split('UTF-8')?.[1];
      fileName = decodeURIComponent(name);
    } else if (content.includes('filename=')) {
      let name = content.split('filename=')[1];
      // "的ASCII码为34，'的ASCII码为39
      if ([34, 39].includes(name?.[0]?.charCodeAt())) {
        fileName = name.slice(1, -1);
      } else {
        fileName = name;
      }
    }
  }

  const blob = new Blob([res.data]);
  let a = document.createElement('a');
  const url = window.URL.createObjectURL(blob);
  a.href = url;
  a.setAttribute('download', fileName);
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  a.parentNode.removeChild(a);
};