layUI導(dǎo)出Excel數(shù)據(jù)時(shí)報(bào)錯(cuò)怎么解決

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

序言：

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

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

問(wèn)題：

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

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

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

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

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

解決方法：

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

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

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

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
    //準(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方法進(jìn)行值替換
                        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. 請(qǐng)?jiān)趌ayui 之前引用。
如放入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) {//當(dāng)然可以自定義簡(jiǎn)單的下載文件實(shí)現(xiàn)方式 
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下載";
    tmpa.href = URL.createObjectURL(obj); //綁定a標(biāo)簽
    tmpa.click(); //模擬點(diǎn)擊實(shí)現(xiàn)下載
    setTimeout(function () { //延時(shí)釋放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來(lái)釋放這個(gè)object URL
    }, 100);
}

function changeData(s) {
    //如果存在ArrayBuffer對(duì)象(es6) 最好采用該對(duì)象
    if (typeof ArrayBuffer !== 'undefined') {
        
        //1、創(chuàng)建一個(gè)字節(jié)長(zhǎng)度為s.length的內(nèi)存區(qū)域
        var buf = new ArrayBuffer(s.length);
        
        //2、創(chuàng)建一個(gè)指向buf的Unit8視圖，開(kāi)始于字節(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)出中點(diǎn)擊導(dǎo)出excel。

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