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

前端用tableExport.js导出表格时,有以下两个坑:

  1. 身份证等数字,会显示为科学计数法
  2. 不知如何设置导出表格的样式,如字体大小、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>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>2级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>3级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>4级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>5级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>6级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>7级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>8级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>9级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>10级td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
                <tr>
            <td>11级(表演文凭级)td>
            <td>100td>
            <td>5td>
            <td>500td>
            <td>暂无备注td>
        tr>
        
        <tr>
            <td colspan="2">合计td>
            <td data-tableexport-msonumberformat="@">210010868012013002318td>
            <td data-tableexport-msonumberformat="@">210010868012013002318td>
            <td data-tableexport-msonumberformat="@">210010868012013002318td>
        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>账号:34353435td>
            <td colspan="4">银行行号:354333td>
        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>

<script src="/static/js/tableExport-1.10.16.js">script>
<script>
    $(document).ready(function() {
        $("#table").tableExport({
            type:"excel",
            fileName: '结算',
            mso: {
              styles: ['text-align'],
          },
      });
    });
script>
html>

附tableExport-1.10.16.js的下载链接:点击下载

核心代码

  1. 在需要显示非科学计数法的td上加上data-tableexport-msonumberformat="@",这表示设置单元格格式为文本
<td data-tableexport-msonumberformat="@">210010868012013002318td>
  1. 导出时,配置:
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;
}

你可能感兴趣的:(javascript,开发语言,ecmascript)