解决layUI导出到Excel时身份证号码、银行卡号显示不正确问题

前端  /  管理员 发布于 5年前   803

修改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时身份证号码、银行卡号显示不正确问题的详细内容，更多请关注其它相关文章！