解决layui表格导出后数值变成科学计数法

2022-05-18 11:56:59 浏览数 (3)

layui的数据表格用起来的确很方便,开发时能节省很多时间。但是,在投入使用后,导出的表格却是能收到很多反馈,说内容不对。不对的地方主要体现在身份证号码之类的比较长数值,用Excel软件打开后,15位以后的数值会丢失,导致身份证号码不完整。Layui最近一两年的更新力度越来越小了,经常跳票,也不知道能活多久,只能先自己动手吧~

首先,我们用文本查看工具查看导出的内容,可以确定,导出的身份证号码是完整,但用Excel软件打开之后,就出问题了。为此,我百度了下Excel的处理机制,得知,Excel显示数字时,如果数字大于12位,它会自动转化为科学计数法,如果数字大于15位,它不仅用于科学技术法表示,还会只保留高15位,其他位都变0。

如果要解决这个问题,目前只想到一个解决方法,让Excel处理这个数据的时候,不识别它为数值。这要怎么做呢?

首先,我们先前往github下载未压缩过的代码,搜索table.exportFile = function 这个方法的原始代码如下

代码语言:javascript复制
//表格导出
table.exportFile = function(id, data, type){
    var that = this;

    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");

    if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');

    alink.href = 'data:'  textType  ';charset=utf-8,ufeff'  encodeURIComponent(function(){
        var dataTitle = [], dataMain = [], dataTotal = [];

        //表头和表体
        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){
                        var content = item1[item3.field];
                        if(content === undefined || content === null) content = '';

                        i1 == 0 && dataTitle.push(item3.title || '');
                        vals.push('"'  parseTempData(item3, content, item1, 'text')   '"');
                    }
                });
            }
            dataMain.push(vals.join(','));
        });

        //表合计
        layui.each(that.dataTotal, function(key, value){
            dataTotal.push(value);
        });

        return dataTitle.join(',')   'rn'   dataMain.join('rn')   'rn'   dataTotal.join(',');
    }());

    alink.download = (config.title || 'table_'  (config.index || ''))   '.'   type;
    document.body.appendChild(alink);
    alink.click();
    document.body.removeChild(alink);
};

然后将里面的

代码语言:javascript复制
vals.push('"'  parseTempData(item3, content, item1, 'text')   '"');

替换成

代码语言:javascript复制
content = parseTempData(item3, content, item1, 'text').replace(/(^s*)|(s*$)/g, "");
if (/^d $/.test(content) && content.length > 15 && type == 'xls') {
    vals.push('="'  content   '"');
} else {
    vals.push('"'  content   '"');
}

显示问题解决了,但不适合用于数据运算,但办公室的Excel大神们应该有办法吧。反正我能让他正常显示就行了,其它我不管,哈哈。

哦,对了,差点忘了标题。上面只是解决了数值大于15位会丢失尾数的问题,并没有解决科学计数法的问题。如果想不显示科学计数法,将里面的代码替换下即可。其实推荐使用上面的代码就可以了,科学计数法问题可以设置单元格格式来解决。

代码语言:javascript复制
vals.push('"'  parseTempData(item3, content, item1, 'text')   '"');

替换成

代码语言:javascript复制
content = parseTempData(item3, content, item1, 'text').replace(/(^s*)|(s*$)/g, "");
if (/^d $/.test(content) && content.length > 12 && type == 'xls') {
    vals.push('="'  content   '"');
} else {
    vals.push('"'  content   '"');
}

1 人点赞