以下代码是工具类文件exportToExcel.js 内容,实现场景是将antd的table数据导出成excel文件(其他UI框架的table也同样适用,只需传入合适的数据)。
exportToExcel() 方法接受  表格列数据、 表格数据 和 导出文件名 3个参数, 表格列数据和表格数据都直接使用 Table 组件中的columns和dataSource的数据,无需更改。文件名默认后缀为.xls。 若有需要转义的数据, 自行拓展。。
这里用到了一个隐藏的 <a id="exportToExcel" style="visibility:hidden"></a> 标签, 可以定义在index.html或者自己喜欢的地方
 
import moment from 'moment';

 

function base64(s) {
return window.btoa(unescape(encodeURIComponent(s)));
}

 

function exportToExcel(columns, data, fileName) {
let str = '<tr><td>';
columns.forEach((item, index) => {
if (index === columns.length - 1) {
str += `${item.title}</td></tr>`;
} else {
str += `${item.title}</td><td>`;
}
});
data.forEach((item) => {
str += '<tr>';
columns.forEach((column) => {
// 处理时间戳格式数据
const value = (/[d|D]ate|[t|T]ime/.test(column.dataIndex) && typeof item[column.dataIndex] === 'number') ?
moment(item[column.dataIndex]).format('YYYY-MM-DD hh:mm:ss') : item[column.dataIndex];
str += `<td>${`${value || ''}\t`}</td>`;
});
str += '</tr>';
});
// Worksheet名字
const worksheet = 'Sheet1';
const uri = 'data:application/vnd.ms-excel;base64,';
// 表格模板数据
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>${str}</table></body></html>`;

 

document.getElementById('exportToExcel').href = uri + base64(template);
// 补后缀
const name = fileName.split('.')[1] ? fileName : `${fileName}.xls`;
document.getElementById('exportToExcel').download = name;
document.getElementById('exportToExcel').click();
}

 

export default exportToExcel;