layUI导出Excel数据时报错怎么解决-创新互联
这期内容当中的小编将会给大家带来有关layUI导出Excel数据时报错的解决方法，以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
序言：
layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui 提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，其中包括:layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。
问题：
在使用layui table组件的过程中，发现在导出excel的时候身份证号码显示不正确 变成了科学计数法。
后来发现layUI在导出excel的时候其实和导出csv是一样的处理，造成了虽然导出数据用txt打开是正确的，
但是用excel 等工具打开会出现身份证，银行卡等信息被当成了数值类型。
变成了科学计数法，无法正常显示的问题。无法满足项目客户需求，通过后台代码导出excel 代价太大。系统有很多表需要导出，开发成本太高。
而且，太多导出会严重影响服务器性能。
解决方法：
后来我找了一个前端的 js 导出excel的框架 sheetjs
发现里面有一个XLSX.utils.json_to_sheet 的方法挺好用，就想着自己尝试修改table.js源码来解决这个问题。
以下是我的解决方案，希望可以帮到你们
1: 在引入layui.js前 需要引入 xlsx.full.min.js.
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 之前引用。
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数据时报错怎么解决-创新互联
分享URL：http://mswzjz.cn/article/ijdgj.html