最近在项目上遇到了一个导出的需求，需要将前端表格中的数据导出，并且保留表格原有的样式；经过一番摸索找到了一种方法：
function exportLocalDataToExcel2(tableStr, fileName) {
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>
<meta charset="utf-8">
<!--[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>${tableStr}</table>
</body>
</html>
`;
// 下载模板
const a = document.createElement('a');
a.href = uri + window.btoa(unescape(encodeURIComponent(template))); // 之所以这样写是为了防止出现中文乱码
a.download = `${fileName}.xlsx`;
a.click();
}
这个方法主要思想就是直接写一份HTML的模板，然后直接导出成excel文件；接收的两个函数一个是表格的html代码，一个是文件名；
以下为导出示例：
const tableStr =
`
<tr>
<th>国家</th>
<th>大洲</th>
</tr>
<tr>
<td style="background: #ff0000;">中国</td>
<td>亚洲</td>
</tr>
<tr>
<td>葡萄牙</td>
<td rowSpan="2">欧洲</td>
</tr>
<tr>
<td>西班牙</td>
</tr>
`;
exportLocalDataToExcel(tableStr, '国家');
导出的excel中就会带有样式了
image.png
