解决layUI导出到Excel时身份证号码、银行卡号显示不正确问题
前端  /  管理员 发布于 4年前   693
修改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时身份证号码、银行卡号显示不正确问题的详细内容,更多请关注其它相关文章!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号