ant design 中，使用dva/fetch 设置导致无法从后台导出excel的问题

Posted 2020-12-28 zhangsdml

最近使用antd 做一个后台管理系统中，业务场景下需要将数据导出为excel，后端使用POI，结果数据怎么都无法生成，后面发现原来是前端限制了header 中可以接受的数据类型为json，无法接受blob的类型，后来改用了axios，就可以顺利导出了，下面是导出的代码

 

 1 import axios from ‘axios‘;
 2 
 3 async function getExcel(url, fileName) {
 4   const token = localStorage.getItem(‘token‘);
 5   axios
 6     .get(url, {
 7       responseType: ‘blob‘, // 表明返回服务器返回的数据类型,
 8       headers: {
 9         Authorization: ‘Bearer ‘ + token,
10         Accept: ‘application/json‘,
11       },
12     })
13     .then(res => {
14       const content = res;
15       const blob = new Blob([content.data], {
16         type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8‘,
17       });
18       // return;
19       if (‘download‘ in document.createElement(‘a‘)) {
20         // 非IE下载
21         const elink = document.createElement(‘a‘);
22         elink.download = fileName;
23         elink.style.display = ‘none‘;
24         elink.target = ‘_blank‘;
25         elink.href = URL.createObjectURL(blob);
26         document.body.appendChild(elink);
27         console.log(elink);
28         elink.click();
29         URL.revokeObjectURL(elink.href); // 释放URL 对象
30         document.body.removeChild(elink);
31         // window.location.reload();
32       } else {
33         // IE10+下载
34         navigator.msSaveBlob(blob, fileName);
35         window.location.reload();
36       }
37     });
38 }
39 export default {
40   getExcel,
41 };