Layui表格怎么设置在导出数据时自动对身份证号字段进行脱敏处理

落磊吖_8954

落磊吖_8954

2026-06-22

817人浏览

原创

最简方案是在表格列定义中用templet函数为身份证字段值末尾添加制表符 ,即templet: function(d) { return (d.idCard || '') + ' '; },确保Excel识别为文本;若需导出时脱敏,则须重写layui.table.parseTempData方法处理原始数据。

导出前用 templet 对身份证字段加制表符(最简方案)

layui 自带的 exportfile 导出逻辑会把纯数字长串(如18位身份证)识别为数值,excel 打开后自动转成科学计数法或截断末尾 0。最轻量的解法不是改源码、也不是引入 xlsx 插件,而是在表格列定义里用 templet 预处理字段值:在身份证号后面拼一个 ,强制 excel 当作文本读取。

  • templet: function(d) { return d.idCard + ' '; } —— 注意是单引号包裹的 ,不是字符串 '\t' 或 't'
  • 如果后端返回的是 null/undefined,得先兜底:return (d.idCard || '') + ' ';
  • 这个 不会影响页面渲染(浏览器忽略制表符空白),只作用于导出时的原始数据流
  • 别用   或空格替代 —— Excel 会裁掉首尾空白, 是唯一被广泛保留的“无害文本标记”

需要完整脱敏(如 110101********1234)就改 parseTempData 入口

如果你不满足于“显示正常”,而是明确要求导出文件里身份证就得是脱敏格式(比如只显示前6后4),就不能只靠 templet —— 因为 templet 只影响页面展示,导出时仍会走 parseTempData 重新取原始字段值。必须拦截这个环节:

  • 在 layui 初始化之后、table.render() 之前,重写 layui.table.parseTempData:
  • layui.table.parseTempData = function(options, data, item) {
      if (item.field === 'idCard' && data) {
        const id = String(data);
        return id.length === 18 
          ? id.slice(0, 6) + '****' + id.slice(-4) 
          : id;
      }
      return data;
    };
  • 注意:这个函数会被反复调用,别在里面做 DOM 操作或异步请求
  • 如果表格有多个身份证字段(如 idCard 和 guardianIdCard),要分别判断 item.field

为什么不用改 table.js 源码或引入 xlsx.full.min.js

网上很多方案让你下载 xlsx 插件、修改 table.js 里的 prepareExcelData,实际踩坑概率高:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • xlsx.full.min.js 和 layui 2.x 的 Promise 链不兼容,容易导致导出按钮点击无响应
  • 直接改 table.js 源码会让升级困难,且新版 layui(如 2.9+)已调整导出逻辑路径,老教程的 patch 位置可能失效
  • 多数项目只需要解决“显示正确”或“简单脱敏”,没必要为单个字段引入 500KB 的 xlsx 库
  • 真正需要 Excel 样式控制(合并单元格、颜色、公式)才值得上 xlsx;纯数据导出,CSV 就够用,而 方案对 CSV 和 Excel 都生效

导出后 Excel 里仍显示 000?检查这三点

即使加了 ,还是出现末尾三位变 000,大概率是以下某个环节漏了:

  • 后端接口返回的身份证字段是数字类型(如 JSON 里没加引号),浏览器自动转成 Number 后丢失精度 —— 必须确保接口返回的是字符串:"idCard": "110101199003072234",不是 "idCard": 110101199003072234
  • 用了 lay-data 动态绑定但没设 data-type="text",某些旧版 layui 渲染时会二次转换
  • 导出时用了自定义 data 参数(如 table.exportFile('id', customData)),但 customData 里身份证字段没加 —— 此时 templet 不生效,得手动处理数组

真正麻烦的不是加那一个 ,而是你得确认它从接口、到渲染、再到导出这一整条链路上,没有被任何地方悄悄 toString() 或 Number() 一次。只要中间断一环,脱敏或防科学计数法都会失效。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2303

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4943

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6030

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5538

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

783

5

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

80

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

80

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

80

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

60

26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习