前端用tableExport.js導出表格時眉尸，有以下兩個坑：
- 身份證等數字域蜗，會顯示為科學計數法
- 不知如何設置導出表格的樣式，如字體大小噪猾、family霉祸、邊框等
百度以及谷歌后，很多都是通過修改源碼來解決的袱蜡，但這樣不夠優(yōu)雅丝蹭。。
所以查看了tableExport.js源碼后坪蚁，發(fā)現可以通過配置來解決這兩個問題奔穿。
廢話不多說，直接給例子代碼敏晤，注意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>機構名稱：阿斯頓發(fā)</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>
<!-- 這個請?zhí)鎿Q成自己的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;
}
