最近二进制文件流下载可谓是又出幺蛾子，翻阅以前的文章也找不到解决方案，感觉还是没用完全理解，这次再整理一遍。

先说一个通用场景，就是无论get还是post在接口请求的时候设定好

headers: { 'Content-Type': 'application/json;charset=UTF-8' },
responseType: "blob" 

比如你有一个axios实例名为service，那么他的post和get分别为：

// 下载模板
export const exportExcle = (params) => service.post('detail/export', params, {
    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
    responseType: "blob"
});

// 下载模板
export const getTemplateDownload = (params) => service.get('template/download', { 
    params,
    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
    responseType: "blob" 
});

通过上述接口请求，可以直接获取文件流，如下：

这时候可以用console 打印一下，确认当前的文件流信息是 response，还是 response.data。
将确认好的文件流，转为blob地址（以excel为例）

const blob = new Blob([response], {
     type: 'application/vnd.ms-excel',
 });
或
const blob = new Blob([response.data], {
     type: 'application/vnd.ms-excel',
 });

最后通过模拟一个a标签，进行下载

const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.style.display = 'none';
link.href = blobUrl;
link.download = `${fileName}.xlsx`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

完整方案：

export const exportExcle = (params) => service.post('detail/export', params, {
    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
    responseType: "blob"
});

export const downloadFile = (response, fileName = 'exported_file') => {
    const blob = new Blob([response], {
        type: 'application/vnd.ms-excel',
    });
    const blobUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = blobUrl;
    link.download = `${fileName}.xlsx`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

exportExcle.then(res => {
	downloadFile(res, 'template')
})

如果有其他形式文件，blob的格式如下：

const blob = new Blob(['后台返回的二进制文件'],{type : '该文件是什么类型的文件(MIME)'});

后缀名       MIME名称
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    

*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

至此完结撒花。以后下载类需求再也不会堵我时间了。