【vue2】前端实现下载后端返回的application/octet-stream文件流

1、下载csv/txt时
此时无须修改接口的响应格式

let filenameRegex =/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;let matches = filenameRegex.exec(data.headers['content-disposition']);let blob =newBlob(['\uFEFF'+ data.data],{//目前只有csv格式type:'text/csv;charset=utf-8'})var downloadElement = document.createElement('a');var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = matches[1].substring(0, matches[1].lastIndexOf('.'));
document.body.appendChild(downloadElement); 
downloadElement.click();//注销掉
window.URL.revokeObjectURL(href);//清除生成的链接，会占用一些东西，不知道啥，反正运行慢点

2、下载Excel时，需要修改一下接口的响应格式为blob

axios({method:"POST",url: constants.url.QUERY_DESCRIBE_TEST_REPORT_DOWNLOAD,responseType:"blob",//FIXME 很重要timeout:60000,data:{
     TestTaskId,},}).then((response)=>{
     console.log("response", response);if(!response ||!response.data){
       self.$message({type:"error",message:"导出失败！",});return;}let filenameRegex =/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;let matches = filenameRegex.exec(
       response.headers["content-disposition"]);let blob =newBlob([response.data]);let downloadFilename = matches[1];if(window.navigator && window.navigator.msSaveOrOpenBlob){//兼容ie浏览器
       window.navigator.msSaveOrOpenBlob(blob, downloadFilename);}else{//谷歌,火狐等浏览器let url = window.URL.createObjectURL(blob);let downloadElement = document.createElement("a");
       downloadElement.style.display ="none";
       downloadElement.href = url;
       downloadElement.download = downloadFilename;
       document.body.appendChild(downloadElement);
       downloadElement.click();
       document.body.removeChild(downloadElement);
       window.URL.revokeObjectURL(url);}}).catch((err)=>{this.$message.error(err);});

另

{".3gp","video/3gpp"},{".apk","application/vnd.android.package-archive"},{".asf","video/x-ms-asf"},{".avi","video/x-msvideo"},{".bin","application/octet-stream"},{".bmp","image/bmp"},{".c","text/plain"},{".csv","text/csv;charset=utf-8"},{".class","application/octet-stream"},{".conf","text/plain"},{".cpp","text/plain"},{".doc","application/msword"},{".docx","application/vnd.openxmlformats-officedocument.wordprocessingml.document"},{".xls","application/vnd.ms-excel"},{".xlsx","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},{".exe","application/octet-stream"},{".gif","image/gif"},{".gtar","application/x-gtar"},{".gz","application/x-gzip"},{".h","text/plain"},{".htm","text/html"},{".html","text/html"},{".jar","application/java-archive"},{".java","text/plain"},{".jpeg","image/jpeg"},{".jpg","image/jpeg"},{".js","application/x-javascript"},{".log","text/plain"},{".m3u","audio/x-mpegurl"},{".m4a","audio/mp4a-latm"},{".m4b","audio/mp4a-latm"},{".m4p","audio/mp4a-latm"},{".m4u","video/vnd.mpegurl"},{".m4v","video/x-m4v"},{".mov","video/quicktime"},{".mp2","audio/x-mpeg"},{".mp3","audio/x-mpeg"},{".mp4","video/mp4"},{".mpc","application/vnd.mpohun.certificate"},{".mpe","video/mpeg"},{".mpeg","video/mpeg"},{".mpg","video/mpeg"},{".mpg4","video/mp4"},{".mpga","audio/mpeg"},{".msg","application/vnd.ms-outlook"},{".ogg","audio/ogg"},{".pdf","application/pdf"},{".png","image/png"},{".pps","application/vnd.ms-powerpoint"},{".ppt","application/vnd.ms-powerpoint"},{".pptx","application/vnd.openxmlformats-officedocument.presentationml.presentation"},{".prop","text/plain"},{".rc","text/plain"},{".rmvb","audio/x-pn-realaudio"},{".rtf","application/rtf"},{".sh","text/plain"},{".tar","application/x-tar"},{".tgz","application/x-compressed"},{".txt","text/plain"},{".wav","audio/x-wav"},{".wma","audio/x-ms-wma"},{".wmv","audio/x-ms-wmv"},{".wps","application/vnd.ms-works"},{".xml","text/plain"},{".z","application/x-compress"},{".zip","application/x-zip-compressed"},{"","*/*"}