這期內(nèi)容當(dāng)中的小編將會給大家?guī)碛嘘P(guān)layUI導(dǎo)出Excel數(shù)據(jù)時報錯的解決方法，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、成都做網(wǎng)站、南城網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、南城網(wǎng)絡(luò)營銷、南城企業(yè)策劃、南城品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供南城建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

序言：

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

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

問題：

在使用layui table組件的過程中，發(fā)現(xiàn)在導(dǎo)出excel的時候身份證號碼顯示不正確 變成了科學(xué)計數(shù)法。

后來發(fā)現(xiàn)layUI在導(dǎo)出excel的時候其實和導(dǎo)出csv是一樣的處理，造成了雖然導(dǎo)出數(shù)據(jù)用txt打開是正確的，

但是用excel 等工具打開會出現(xiàn)身份證，銀行卡等信息被當(dāng)成了數(shù)值類型。

變成了科學(xué)計數(shù)法，無法正常顯示的問題。無法滿足項目客戶需求，通過后臺代碼導(dǎo)出excel 代價太大。系統(tǒng)有很多表需要導(dǎo)出，開發(fā)成本太高。

而且，太多導(dǎo)出會嚴(yán)重影響服務(wù)器性能。

解決方法：

后來我找了一個前端的 js 導(dǎo)出excel的框架 sheetjs

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

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

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

2: 修改table.js 源碼

//Conan Start
    //準(zhǔn)備csv導(dǎo)出數(shù)據(jù)
    table.prepareCSVData = function (data, id) {
        var dataTitle = [], dataMain = [];
        layui.each(data, function (i1, item1) {
            var vals = [];
            if (typeof id === 'object') { //ID直接為表頭數(shù)據(jù)
                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');
    }
    //準(zhǔn)備Excel表格導(dǎo)出數(shù)據(jù)
    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 導(dǎo)出準(zhǔn)備json數(shù)據(jù)
            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

    //表格導(dǎo)出
    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
    };導(dǎo)出文件需要用到的方法 changeData, saveAs. 請在layui 之前引用。
如放入app.js，然后再layui 之前引用。



function getFileName(filePath){
    var pos=filePath.lastIndexOf("\\");
    return filePath.substring(pos+1);  
}

function saveAs(obj, fileName) {//當(dāng)然可以自定義簡單的下載文件實現(xiàn)方式 
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下載";
    tmpa.href = URL.createObjectURL(obj); //綁定a標(biāo)簽
    tmpa.click(); //模擬點擊實現(xiàn)下載
    setTimeout(function () { //延時釋放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
    }, 100);
}

function changeData(s) {
    //如果存在ArrayBuffer對象(es6) 最好采用該對象
    if (typeof ArrayBuffer !== 'undefined') {
        
        //1、創(chuàng)建一個字節(jié)長度為s.length的內(nèi)存區(qū)域
        var buf = new ArrayBuffer(s.length);
        
        //2、創(chuàng)建一個指向buf的Unit8視圖，開始于字節(jié)0，直到緩沖區(qū)的末尾
        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;
    }
}

然后就可以在表格導(dǎo)出中點擊導(dǎo)出excel。

上述就是小編為大家分享的layUI導(dǎo)出Excel數(shù)據(jù)時報錯的解決方法了，如果您也有類似的疑惑，不妨礙參照上述分析進行理解。如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊。