Solve the problem of incorrect display of ID number and bank card number when exporting layUI to 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/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 试一下了。

The above is the detailed content of Solve the problem of incorrect display of ID number and bank card number when exporting layUI to Excel. For more information, please follow other related articles on the PHP Chinese website!