前端下载文件blob接收返回文件流

vue代码如下，发送请求配置responseType为blob
拿到返回的结果后装成需要的blob格式

axios({
            url: '请求接口url',
            method: 'post',
            params: '请求参数',
            responseType:'blob'   // 重点在于配置responseType: 'blob'
        }).then(res => {
            let fileName = row.fileName+'.'+row.extendName;
            let blob = new Blob([res.data],{type: this.blobJson[row.extendName]});  
            if ('download' in document.createElement("a")) {
                const link = document.createElement("a");
                link.download = fileName;
                link.style.display = 'none';
                const url = window.URL || window.webkitURL || window.moxURL;
                link.href = url.createObjectURL(blob);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);  //  下载完成移除元素
                url.revokeObjectURL(link.href);  // 释放掉blob对象
            } else {
                navigator.msSaveBlob(blob, fileName);
            }
        }) 

不同的文件对应的blob的type不一样，将后缀与对应的类型整理为bolbJson如下

blobJson:{
          aac:"audio/aac",
          abw:"application/x-abiword",
          arc:"application/x-freearc",
          avi:"video/x-msvideo",
          azw:"application/vnd.amazon.ebook",
          bin:"application/octet-stream",
          bmp:"image/bmp",
          bz:"application/x-bzip",
          bz2:"application/x-bzip2",
          csh:"application/x-csh",
          css:"text/css",
          csv:"text/csv",
          doc:"application/msword",
          docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          eot:"application/vnd.ms-fontobject",
          epub:"application/epub+zip",
          gif:"image/gif",
          htm:"text/html",
          html:"text/html",
          ico:"image/vnd.microsoft.icon",
          ics:"text/calendar",
          jar:"application/java-archive",
          jpeg:"image/jpeg",
          jpg:"image/jpeg",
          js:"text/javascript",
          json:"application/json",
          jsonld:"application/ld+json",
          mid:"audio/midi audio/x-midi",
          midi:"audio/midi audio/x-midi",
          mjs:"text/javascript",
          mp3:"audio/mpeg",
          mpeg:"video/mpeg",
          mpkg:"application/vnd.apple.installer+xml",
          odp:"application/vnd.oasis.opendocument.presentation",
          ods:"application/vnd.oasis.opendocument.spreadsheet",
          odt:"application/vnd.oasis.opendocument.text",
          oga:"audio/ogg",
          ogv:"video/ogg",
          ogx:"application/ogg",
          otf:"font/otf",
          png:"image/png",
          pdf:"application/pdf",
          ppt:"application/vnd.ms-powerpoint",
          pptx:"application/vnd.openxmlformats-officedocument.presentationml.presentation",
          rar:"application/x-rar-compressed",
          rtf:"application/rtf",
          sh:"application/x-sh",
          svg:"image/svg+xml",
          swf:"application/x-shockwave-flash",
          tar:"application/x-tar",
          tif:"image/tiff",
          tiff:"image/tiff",
          ttf:"font/ttf",
          txt:"text/plain",
          vsd:"application/vnd.visio",
          wav:"audio/wav",
          weba:"audio/webm",
          webm:"video/webm",
          woff:"font/woff",
          woff2:"font/woff2",
          xhtml:"application/xhtml+xml",
          xls:"application/vnd.ms-excel",
          xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          xml:"text/xml",
          xul:"application/vnd.mozilla.xul+xml",
          zip:"application/zip",
          "3gp":"video/3gpp、audio/3gpp",
          "3g2":"video/3gpp2、audio/3gpp2",
          "7z":"application/x-7z-compressed",
        }

如果要求文件流存储在json的格式中返回，我采用将文件流转化成为base64的格式，前端接收json后再转化为blob下载文件，代码如下：

axios({
            url: '请求接口url',
            method: 'post',
            params: '请求参数',
            responseType:'blob'   // 重点在于配置responseType: 'blob'
        }).then(res => {
            var bstr = atob(resp.data), n = bstr.length, u8arr = new Uint8Array(n);
	        while (n--) {
	          u8arr[n] = bstr.charCodeAt(n);
	        }
	        let blob = new Blob([u8arr],{type: this.blobJson[row.extendName]});
	        let fileName = row.fileName+'.'+row.extendName;
	        if ('download' in document.createElement("a")) {
	            const link = document.createElement("a");
	            link.download = fileName;
	            link.style.display = 'none';
	            const url = window.URL || window.webkitURL || window.moxURL;
	            link.href = url.createObjectURL(blob);
	            document.body.appendChild(link);
	            link.click();
	            document.body.removeChild(link);  //  下载完成移除元素
	            url.revokeObjectURL(link.href);  // 释放掉blob对象
	        } else {
	            navigator.msSaveBlob(blob, fileName);
	        }  
        }) 

后端的文件下载方法参考https://blog.csdn.net/weixin_44812604/article/details/128252709?spm=1001.2014.3001.5501