layui 數據表格自帶的導出Excel,身份證等E+/000問題解決

layui數據表格的工具欄自帶導出Excel 會將身份證等 長整數的 自動變成E+並且 后面有000.從而導致數據不能完整導出。

 

解決方案：

下載地址:  https://download.csdn.net/download/jiang2012yun/12643480 

1.先下載Excel的插件包。將壓縮包內的兩個js放到 layui的modules里面，如圖

 

2.在自己的js里的加載這里 加入Excel的包

 

3.在Html加入數據表格用的工具欄

                        <script type="text/html" id="ReportTBtoolbar">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="seeReport"><i class="layui-icon">&#xe705;</i>查看報告</button>
                                <button class="layui-btn layui-btn-sm" lay-event="printReport"><i class="layui-icon">&#xe66d;</i>打印報告</button>
                                <button class="layui-btn layui-btn-sm" lay-event="printBarCode"><i class="layui-icon">&#xe66d;</i>打印條碼</button>
                            </div>
                            <div class="layui-table-tool-self_diy">
                                <span class="layui-inline yutons-header-tool" title="篩選列" lay-event="LAYTABLE_COLS">
                                    <i class="layui-icon layui-icon-cols"></i>
                                </span>
                                <span class="layui-inline yutons-header-tool" title="導出Excel" lay-event="table_export">
                                    <i class="layui-icon layui-icon-export"></i>
                                </span>
                                <span class="layui-inline yutons-header-tool" title="打印" lay-event="LAYTABLE_PRINT">
                                    <i class="layui-icon layui-icon-print"></i>
                                </span>
                            </div>
                        </script>

如圖：

 

4.在數據表格的js里修改並加入

    //頭工具欄事件
    table.on('toolbar(ReportTB)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'table_export':
                exportFile('ReportTB');
                break;
        };
    });

 

5.在自己的js里 最后加入 以下Excel的擴展方法

if (!Array.from) {
    Array.from = function (el) {
        return Array.apply(this, el);
    }
}

function exportFile(id) {
    //根據傳入tableID獲取表頭
    var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
    var htrs = Array.from(headers.querySelectorAll('tr'));
    var titles = {};
    for (var j = 0; j < htrs.length; j++) {
        var hths = Array.from(htrs[j].querySelectorAll("th"));
        for (var i = 0; i < hths.length; i++) {
            var clazz = hths[i].getAttributeNode('class').value;
            if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
                //排除居左、具有、隱藏字段
                //修改:默認字段data-field+i,兼容部分數據表格中不存在data-field值的問題
                titles['data-field' + i] = hths[i].innerText;
            }
        }
    }
    //根據傳入tableID獲取table內容
    var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
    var btrs = Array.from(bodys.querySelectorAll("tr"))
    var bodysArr = new Array();
    for (var j = 0; j < btrs.length; j++) {
        var contents = {};
        var btds = Array.from(btrs[j].querySelectorAll("td"));
        for (var i = 0; i < btds.length; i++) {
            for (var key in titles) {
                //修改:默認字段data-field+i,兼容部分數據表格中不存在data-field值的問題
                var field = 'data-field' + i;
                if (field === key) {
                    //根據表頭字段獲取table內容字段
                    contents[field] = btds[i].innerText;
                }
            }
        }
        bodysArr.push(contents)
    }
    //將標題行置頂添加到數組
    bodysArr.unshift(titles);
    //導出excel
    excel.exportExcel({
        sheet1: bodysArr
    }, '用戶表' + new Date().toLocaleString() + '.xlsx', 'xlsx');
}

如圖

 

這樣就完美解決了，原理是 隱藏自帶的 工具欄圖標，然后重寫工具欄圖標，除了導出Excel外 其他兩個都是調用原生layui的方法。導出Excel調用的是 加入的擴展方法。這里是為了兼容IE 的寫法

if (!Array.from) {
      Array.from = function (el) {
          return Array.apply(this, el);
      }
  }