以文件流的方式导出文件 vue+axios

通常状况下,后端会提供一个下载连接,前端只须要使用location.href或者a标签打开连接便可.

当后端返回的是文件流时,前端使用blob对象读取流并使用a标签下载.

axios({
       method: "get",
       url: this.downUrl,
       headers: {
         instuuid: sessionStorage.getItem("enterpriseUuid")
       },
       responseType: "blob" // 设置接收格式为blob格式
     }).then(res => {
       console.log("res :>> ", res);
       const content = res.data;
       const blob = new Blob([content]); //构造一个blob对象来处理数据
       const fileName = "企业级条件项库.xlsx";

       //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
       //IE10以上支持blob可是依然不支持download
       if ("download" in document.createElement("a")) {
         //支持a标签download的浏览器
         const link = document.createElement("a"); //建立a标签
         link.download = fileName; //a标签添加属性
         link.style.display = "none";
         link.href = URL.createObjectURL(blob);
         document.body.appendChild(link);
         link.click(); //执行下载
         URL.revokeObjectURL(link.href); //释放url
         document.body.removeChild(link); //释放标签
       } else {
         //其余浏览器
         navigator.msSaveBlob(blob, fileName);
       }
     });