如何解決layUI導出到Excel時身份證號碼、銀行卡號顯示不正確的問題

本篇內容主要講解“如何解決layUI導出到Excel時身份證號碼、銀行卡號顯示不正確的問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何解決layUI導出到Excel時身份證號碼、銀行卡號顯示不正確的問題”吧!

修改table.js 使用JS-excel 前端excel導出框架來實現Excel 導出

感謝layui 的編寫者賢心，以及對layui做出貢獻的各位大神，讓我們有了開箱即用的前端js框架。為項目的編寫節省了不少時間。

在使用layui table組件的過程中，發現在導出excel的時候身份證號碼顯示不正確 變成了科學計數法。

后來發現layUI在導出excel的時候其實和導出csv是一樣的處理，造成了雖然導出數據用txt打開是正確的，

但是用excel 等工具打開會出現身份證，銀行卡等信息被當成了數值類型。

變成了科學計數法，無法正常顯示的問題。無法滿足項目客戶需求，通過后臺代碼導出excel 代價太大。系統有很多表需要導出，開發成本太高。

而且，太多導出會嚴重影響服務器性能。

怎么解決呢？推薦：layui教程

后來我找了一個前端的 js 導出excel的框架 sheetjs

發現里面有一個XLSX.utils.json_to_sheet 的方法挺好用，就想著自己嘗試修改table.js源碼來解決這個問題。

以下是我的解決方案，希望可以幫到你們

1: 在引入layui.js前 需要引入 xlsx.full.min.js.

<script type="text/javascript" src="../../js/xlsx.full.min.js" charset="utf-8"></script><script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>

2: 修改table.js 源碼

//Conan Start    //準備csv導出數據    table.prepareCSVData = function (data, id) {        var dataTitle = [], dataMain = [];        layui.each(data, function (i1, item1) {            var vals = [];            if (typeof id === 'object') { //ID直接為表頭數據                layui.each(id, function (i, item) {                    i1 == 0 && dataTitle.push(item || '');                });                layui.each(table.clearCacheKey(item1), function (i2, item2) {                    vals.push(item2);                });            } else {                table.eachCols(id, function (i3, item3) {                    if (item3.field && item3.type == 'normal' && !item3.hide) {                        i1 == 0 && dataTitle.push(item3.title || '');                        vals.push(item1[item3.field]);                    }                });            }            dataMain.push(vals.join(','))        });        return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n');    }    //準備Excel表格導出數據    table.prepareExcelData = function (data, id) {        var excelData = [];        var dataTitle = [];        layui.each(data, function (i1, item1) {            var vals = [];            if (typeof id === 'object') {                 layui.each(id, function (i, item) {                    i1 == 0 && dataTitle.push(item || '');                });                layui.each(table.clearCacheKey(item1), function (i2, item2) {                    vals.push(item2);                });            } else {                table.eachCols(id, function (i3, item3) {                    if (item3.field && item3.type == 'normal' && !item3.hide) {                        i1 == 0 && dataTitle.push(item3.title || '');                        var colName = item3.field;                        var colValue = item1[colName];                        var templetFunc = item3.templet;                        //如果templet 方法不為空，使用templet方法進行值替換                        if(templetFunc != null) {                            colValue = templetFunc(item1);                        }                        vals.push(colValue);                    }                });            }            //為 js-excel 導出準備json數據            var tempStr = "";            for (var i = 0; i < vals.length; i++) {                if (i == 0) {                    tempStr = "\"" + dataTitle[i] + "\":" + "\"" + vals[i] + "\"";                } else {                    tempStr = tempStr + ",\"" + dataTitle[i] + "\":" + "\"" + vals[i] + "\"";                }            }            var tempLineJsonObjStr = "{" + tempStr + "}";            excelData.push(JSON.parse(tempLineJsonObjStr));            //dataMain.push(vals.join(','))        });        return excelData;    }    //Conan End    //表格導出    table.exportFile = function (id, data, type) {        data = data || table.clearCacheKey(table.cache[id]);        type = type || 'csv';        var config = thisTable.config[id] || {}            , textType = ({                csv: 'text/csv'                , xls: 'application/vnd.ms-excel'            })[type]            , alink = document.createElement("a");        //Conan Start        if (device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');        if (type == 'csv') {            alink.href = 'data:' + textType + ';charset=utf-8,\ufeff' + encodeURIComponent(function () {                return table.prepareCSVDat1;           workBook.Sheets['Sheet1'] = XLSX.utils.table_to_sheet(jsonTable);            */            var excelJsonStr = table.prepareExcelData(data, id);            workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(excelJsonStr);            var xlsFilename = (config.title || 'table_' + (config.index || '')) + '.' + type;            saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], { type: "application/vnd.ms-excel" }), xlsFilename);        }        //Conan End    };導出文件需要用到的方法 changeData, saveAs. 請在layui 之前引用。如放入app.js，然后再layui 之前引用。<script type="text/javascript" src="../../js/app.js" charset="utf-8"></script><script type="text/javascript" src="../../js/xlsx.full.min.js" charset="utf-8"></script><script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>function getFileName(filePath){    var pos=filePath.lastIndexOf("\\");    return filePath.substring(pos+1);  }function saveAs(obj, fileName) {//當然可以自定義簡單的下載文件實現方式     var tmpa = document.createElement("a");    tmpa.download = fileName || "下載";    tmpa.href = URL.createObjectURL(obj); //綁定a標簽    tmpa.click(); //模擬點擊實現下載    setTimeout(function () { //延時釋放        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL    }, 100);}function changeData(s) {    //如果存在ArrayBuffer對象(es6) 最好采用該對象    if (typeof ArrayBuffer !== 'undefined') {                //1、創建一個字節長度為s.length的內存區域        var buf = new ArrayBuffer(s.length);                //2、創建一個指向buf的Unit8視圖，開始于字節0，直到緩沖區的末尾        var view = new Uint8Array(buf);                //3、返回指定位置的字符的Unicode編碼        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;        return buf;    } else {        var buf = new Array(s.length);        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;        return buf;    }}

然后就可以在表格導出中點擊導出excel 試一下了。

到此，相信大家對“如何解決layUI導出到Excel時身份證號碼、銀行卡號顯示不正確的問題”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！