layUI導出Excel數據時報錯怎么解決

這期內容當中的小編將會給大家帶來有關layUI導出Excel數據時報錯的解決方法，以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

序言：

layui，是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

layui 提供了豐富的內置模塊，他們皆可通過模塊化的方式按需加載，其中包括:layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

問題：

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

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

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

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

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

解決方法：

后來我找了一個前端的 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數據時報錯的解決方法了，如果您也有類似的疑惑，不妨礙參照上述分析進行理解。如果想了解更多相關內容，請關注億速云行業資訊。