前端用tableExport.js导出表格时，有以下两个坑：
- 身份证等数字，会显示为科学计数法
- 不知如何设置导出表格的样式，如字体大小、family、边框等
百度以及谷歌后，很多都是通过修改源码来解决的，但这样不够优雅。。
所以查看了tableExport.js源码后，发现可以通过配置来解决这两个问题。
废话不多说，直接给例子代码，注意tableExport.js的版本是1.10.16以及以上的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td colspan="5">学院</td>
</tr>
<tr>
<td>机构名称：阿斯顿发</td>
<td colspan="4">考级年份：2024年寒假</td>
</tr>
<tr>
<td colspan="5">考级结算清单</td>
</tr>
<tr>
<td>级别</td>
<td>实际收费<br>（元/人）</td>
<td>人数</td>
<td>总额（元）</td>
<td>备注</td>
</tr>
<tr>
<td>1级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>2级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>3级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>4级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>5级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>6级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>7级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>8级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>9级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>10级</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td>11级（表演文凭级）</td>
<td>100</td>
<td>5</td>
<td>500</td>
<td>暂无备注</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td data-tableexport-msonumberformat="@">110060868012015002317</td>
<td data-tableexport-msonumberformat="@">110060868012015002317</td>
<td data-tableexport-msonumberformat="@">110060868012015002317</td>
</tr>
<tr></tr>
<tr>
<td>合计实交人民币（大写）：<br>壹贰叁肆伍陆柒扒玖拾</td>
<td colspan="4">壹贰叁肆伍陆</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>收款单位：学院</td>
<td colspan="4">开户行：银行支行</td>
</tr>
<tr>
<td>账号：34353435</td>
<td colspan="4">银行行号：354333</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="3">学院</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="3">2024 年 10 月 20 日</td>
</tr>
</table>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 这个请替换成自己的tableExport.js的路径 -->
<script src="/static/js/tableExport-1.29.0.js"></script>
<script>
$(document).ready(function() {
$("#table").tableExport({
type:"excel",
fileName: '结算',
mso: {
styles: ['text-align'],
},
});
});
</script>
</html>
核心代码
- 在需要显示非科学计数法的td上加上
data-tableexport-msonumberformat="@"，这表示设置单元格格式为文本
<td data-tableexport-msonumberformat="@">110060868012015002317</td>
- 导出时，配置：
mso: {
styles: ['text-align'], // 这个表示要应用到导出的excel样式名称
},
别忘了在head那边加上css：
td {
text-align: center; // 居中显示
}
要设置其他如字体大小、字体样式、表格边框等样式的话，可以参考如下配置：
mso: {
styles: ['text-align', 'font-family', 'font-size', 'border'],
},
然后在head那边加上css即可：
td {
font-family: SimSun;
font-size: 14px;
border: 1px solid #ddd;
}
网友评论