Layui table导出数据时如何处理长数字科学计数法

浅墨君_5406

浅墨君_5406

2026-07-05

396人浏览

原创

加\t是解决excel将长数字误转为科学计数法的最轻量方案。它利用excel对末尾制表符的文本识别机制,避免浮点精度丢失,无需改源码、引新库或依赖后端,导出即生效。

直接在长数字字段末尾加 \t(制表符)是最轻量、最稳定、兼容性最好的解法。 不改源码、不引新库、不依赖后端,导出即生效,excel 打开就识别为文本。

为什么加 \t 就能骗过 Excel?

Excel 解析 CSV 时判断单元格类型,不是靠双引号,而是看内容“像不像数字”。纯数字 ≥15 位(如身份证、订单号、银行卡号)会被强制转双精度浮点——此时精度已丢,无法还原。而 \t 是 Excel 明确认可的文本标记之一,只要字段值末尾带它,哪怕被双引号包裹,Excel 也会放弃数值解析,按文本处理。

其他方式对比:

  • '12345678901234567890(单引号前置):部分 Excel 版本会显示单引号,影响阅读
  • "12345678901234567890"(纯双引号):Layui 默认就加了,但对长数字无效——Excel 仍当数值
  • 用 sheetjs 重写导出:引入 500KB+ 体积,与 Layui 2.x 的 Promise 链易冲突,导出按钮可能无响应

在哪加 \t?优先用 templet 字段级控制

这是最可控、最易维护的方式,不污染全局逻辑,且能配合业务做脱敏或格式化。

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

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

下载
  • 在列定义中对目标字段显式加 templet:
    { field: 'idCard', title: '身份证号', templet: function(d) { return d.idCard ? d.idCard + '\t' : ''; } }
  • 如果字段可能为 null 或 undefined,必须判空,否则 JS 报错:Cannot read property 'length' of null
  • 不要用 parseInt/parseFloat 再转一次——那又掉回浮点陷阱里了
  • 避免在 templet 中拼接空格、换行、逗号,否则 CSV 解析会错乱

如果要用 exportFile 全局处理,改哪?

仅建议项目已稳定、升级频率低、且多个表都需统一处理时采用。修改点在 layui/lay/modules/table.js 中 exportFile = function 的主体逻辑内,关键替换位置是遍历单元格值的那段:

  • 找到原生拼接 vals.push('"' + (item2 || '') + '"'); 的地方
  • 替换成带正则判断的逻辑:
    var val = item2 || '';
    if (/^\d{15,}$/.test(val)) {
      vals.push('"' + val + '\t"');
    } else {
      vals.push('"' + val + '"');
    }
  • 注意:新版 Layui(如 2.9+)导出路径已调整,老教程 patch 位置可能失效;IE 下走 navigator.msSaveBlob,非 IE 走 data:URL,两处都要覆盖

真正容易被忽略的是:导出内容本身是完好的(用记事本打开可见完整数字),问题只出在 Excel 的自动类型识别上。所以所有方案本质都是「提前声明类型」,而不是「修复数据」。加 \t 是目前唯一既符合 CSV 规范、又不增加额外依赖、还能跨 Excel 版本稳定的声明方式。

相关文章

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

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

下载

相关标签:

layui

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

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2035

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2962

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1016

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3339

7

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

3831

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

6488

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

774

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

674

12

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

2025.12.30

353

8

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 11万人学习

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

共5课时 | 1.6万人学习