搜尋
首頁web前端Layui教程解決layUI匯出到Excel時身分證號碼、銀行卡號顯示不正確問題

解決layUI匯出到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/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時身分證號碼、銀行卡號顯示不正確問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:fly社区。如有侵權,請聯絡admin@php.cn刪除
如何利用Layui实现图片轮播图功能如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM

如何利用Layui实现图片轮播图功能现如今,图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼,吸引用户的眼球,提升用户体验。在本文中,我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先,我们需要在HTML页面中引入Layui的核心文件和样式文件:&lt;linkrel=&quot;stylesheet&quot;h

2023最新layui视频教程推荐(建议收藏)2023最新layui视频教程推荐(建议收藏)Jul 19, 2021 pm 05:22 PM

以下为大家整理了前端UI框架 — layui的视频教程,不需要从迅雷、百度云之类的第三方网盘平台下载,全部在线免费观看。教程由浅入深,有前端基础的人就能学习,从安装到案例讲解,全面详细,帮助你更快更好的掌握layui框架!

如何利用Layui开发一个具有分页功能的数据展示页面如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM

如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架,提供了简洁美观的界面组件和丰富的交互体验。在开发中,我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先,我们需要引入Layui的相关文件和依赖。在html页面的&lt;head&gt;标签中加入以下代

如何利用Layui实现图片拖拽和缩放效果如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM

如何利用Layui实现图片拖拽和缩放效果在现代网页设计中,图片的交互效果成为增加网页活力和用户体验的重要手段。其中,图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果,并提供具体的代码示例。一、引入Layui框架和相关依赖:首先,我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入

如何利用Layui实现图片反色和亮度调节功能如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM

如何利用Layui实现图片反色和亮度调节功能引言:在前端开发中,经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能,并提供具体代码实例供参考。一、Layui简介:Layui是一款优秀的前端UI框架,具有简洁、美观、易用等特点。它提供了丰富的前端组件,让开发者能够轻松搭建出精美的网站。二、准备工作:在开始之前,我

如何使用Layui开发一个支持文件上传和下载的资源管理系统如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM

如何使用Layui开发一个支持文件上传和下载的资源管理系统引言:随着互联网的发展,数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理,还是个人的文件存储,都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架,具有简洁明了的设计以及丰富的组件库,非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文

如何使用Layui开发一个支持图片放大缩小的相册功能如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM

如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见,通过展示用户上传的图片,让用户能够方便地浏览和管理图片。为了提供更好的用户体验,一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能,同时提供具体的代码示例。首先,确保您已经引入Layui框架的CSS和JS文件。您

如何使用Layui框架开发一个支持实时通讯的在线客服系统如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM

如何使用Layui框架开发一个支持实时通讯的在线客服系统概述:在线客服系统是现代企业提供与客户交流的重要渠道之一,而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统,并提供具体的代码示例。一、准备工作安装Node.js:在开发环境中安装Node.js,并配置好相关环境。安装Layui:在项目中引入Lay

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版