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

问题描述

LayUI是一个比较流行的前端UI框架，其中有一个常用的功能是导出表格数据到Excel。但是在实际使用时，会发现身份证号码、银行卡号等敏感信息被默认格式化成了科学计数法或者变成了“#######”的形式，无法正确显示。本文将探讨解决这一问题的方法。

问题原因

导出Excel时，LayUI会将表格数据转换成一系列的XML标签，然后调用浏览器的Excel插件将这些标签解析成Excel表格。在这个过程中，如果某个值被判断为科学计数法或者太长而无法完整显示，Excel就会默认进行格式化，导致身份证号码、银行卡号等敏感信息显示不正确，以防止这些信息被错误地保存或传播。

解决方案

方案一：引入外部插件

为了避免Excel自动格式化身份证号码、银行卡号等信息，我们可以引入一个名为“Excel-Export”的第三方插件来实现导出Excel的功能。该插件支持对表格数据进行自定义配置，可以关闭Excel的自动格式化功能，从而保证敏感信息的正确显示。

以下是使用该插件实现导出Excel的示例代码：

<script src="js/jquery.min.js"></script>
<script src="js/excel-export.jquery.plugin.min.js"></script>
<script>
    $(function(){
        //导出Excel
        $("#exportBtn").click(function(){
            $("#table").excelExport({
                fileName:"表格数据",//文件名称
                type:'xlsx',//文件类型
                exclude:".noExl",//不需要导出的表格行
                autoWidth:true,//自适应宽度
                exclude_val:["-","/"],//包含特殊字符的列需要添加的正则规则
                columns:[//列配置
                    {columnName:"姓名",columnNameType:'text'},
                    {columnName:"身份证号码",columnNameType:'text'},
                    {columnName:"银行卡号",columnNameType:'text'},
                    {columnName:"手机号码",columnNameType:'text'},
                    {columnName:"电子邮件",columnNameType:'text'},
                    {columnName:"性别",columnNameType:'text'},
                    {columnName:"年龄",columnNameType:'text'},
                    {columnName:"籍贯",columnNameType:'text'},
                    {columnName:"地址",columnNameType:'text'}
                ]
            });
        });
    });
</script>

由于Excel-Export插件的配置项比较多，这里只列出了一部分，具体的说明可以参考其官方文档。

方案二：手动格式化数据

如果不想引入外部插件，也可以通过手动格式化表格数据的方式解决此问题。具体来说，我们可以在表格数据中找到需要格式化的列，然后将其转换成字符串并手动截取前后几位进行显示，保留主体部分使用“*”进行替换。

以下是手动格式化数据的示例代码：

//身份证号码格式化
function formatIDCardNo(idCardNo){
    if(idCardNo.length==18){
        return idCardNo.replace(/(\d{4})\d{10}(\d{4})/,"$1****$2");
    }else if(idCardNo.length==15){
        return idCardNo.replace(/(\d{3})\d{9}(\d{3})/,"$1****$2");
    }else{
        return idCardNo;
    }
}
//银行卡号格式化
function formatBankCardNo(bankCardNo){
    var len = bankCardNo.length;
    return "**** **** **** "+bankCardNo.substring(len-4,len);
}

以上代码中，formatIDCardNo和formatBankCardNo分别是用于格式化身份证号码和银行卡号的函数。其中，利用了正则表达式替换的方法将部分数字进行了替换，再将前后几位用“*”替代。这样做既保留了身份证号码、银行卡号等信息的主体部分，又能防止其被直接显示。

总结

在使用LayUI导出Excel表格数据时，身份证号码、银行卡号等敏感信息可能会出现无法正确显示的问题。为了解决这一问题，可以使用第三方插件Excel-Export来实现导出功能，并关闭Excel的自动格式化功能。另外，也可以通过手动格式化数据的方式来解决这一问题，将身份证号码、银行卡号等信息进行筛选和部分替换，保持信息的核心内容。