标签:read color design nav else head excel code 一个
最近使用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 };
ant design 中,使用dva/fetch 设置导致无法从后台导出excel的问题
标签:read color design nav else head excel code 一个
原文地址:https://www.cnblogs.com/zhangsdml/p/9447784.html