最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 14:05:44
文档

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

解决layUI导出到Excel时身份证号码、银行卡号显示不正确问题:修改table.js 使用JS-excel 前端excel导出框架来实现Excel 导出感谢layui 的编写者贤心,以及对layui做出贡献的各位大神,让我们有了开箱即用的前端js框架。为项目的编写节省了不少时间。在使用layui table组件的过程中,发现在导出excel的时候身份证
推荐度:
导读解决layUI导出到Excel时身份证号码、银行卡号显示不正确问题:修改table.js 使用JS-excel 前端excel导出框架来实现Excel 导出感谢layui 的编写者贤心,以及对layui做出贡献的各位大神,让我们有了开箱即用的前端js框架。为项目的编写节省了不少时间。在使用layui table组件的过程中,发现在导出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/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时身份证号码、银行卡号显示不正确问题

解决layUI导出到Excel时身份证号码、银行卡号显示不正确问题:修改table.js 使用JS-excel 前端excel导出框架来实现Excel 导出感谢layui 的编写者贤心,以及对layui做出贡献的各位大神,让我们有了开箱即用的前端js框架。为项目的编写节省了不少时间。在使用layui table组件的过程中,发现在导出excel的时候身份证
推荐度:
标签: 显示 导出 身份证
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top