tableExport.js设置导出表格的样式，及去除科学计数法

前端用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;
}

最后编辑于：2024.04.10 11:49:41