前端Table用JS导出Excel数字自动变成科学计数法问题
前端导出的表格,类似于这种样式的解决办法分析出原因,使用JS将Table数据导出到Excel中,如果td中书纯数字的话,在Excel格式就是number类型,所以,想长数字会变成科学计数法。
于是乎就在网上百度找对应的解决办法,在转换导入到Excel前给给类型变成字符串String类型。
百度上是这样的,在td中加一个样式 style=‘mso-number-format:"@"’,如这样的
<td style='mso-number-format:"\@"'><label class="text">000001</label></td>
1
我在想我能不能在调用导出Excel的公共方法中做处理,给他加上呢,
发现调用导出Excel的公共方法中可以做批量修改,(直接贴上改后代码)
var tableToExcel = (function() {var uri = 'data:application/vnd.ms-excel;base64,',template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) ;},format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }); };return function(table, name, filename) {if (!table.nodeType) table = document.getElementById(table);//console打印出table.innerHTML出则是table的页面代码//根据正则表达式,把style='mso-number-format:"\@"' 塞入td中,将数据转成Stringtable.innerHTML = table.innerHTML.replace(/<td/g, "<td STYLE='MSO-NUMBER-FORMAT:\\@'"); var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };//此时的innerHTML数据可以自己自定义 比如json转化 只要值要数据符合即可var link = document.createElement("A");link.href = uri + base64(format(template, ctx));link.download = filename;document.body.appendChild(link);link.click();document.body.removeChild(link);};
});
其实就是在点击导出按钮的时候,生成的table表格的td使用正则动态替换成:
appendHtml = appendHtml.replace(/<td/g, "<td STYLE='MSO-NUMBER-FORMAT:\\@'");
此时问题完美解决,不会再根据科学计数法展示表格内容!
完整代码片段:
exportExcel () {// 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码let tableHtml = document.getElementsByClassName("creditrecord");var appendHtml = "";for(var i=0;i<tableHtml.length;i++){appendHtml+=tableHtml[i].outerHTML}appendHtml = appendHtml.replace(/<td/g, "<td STYLE='MSO-NUMBER-FORMAT:\\@'");let html = "<html><head><meta charset='utf-8' /></head><body>" + appendHtml + "</body></html>";// 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象let blob = new Blob([html], { type: "application/vnd.ms-excel" }); //application/octet-stream//也可以用js创建一个a标签let a = document.createElement('a');// var a = document.getElementsByTagName("a")[0];// 利用URL.createObjectURL()方法为a元素生成blob URLa.href = URL.createObjectURL(blob);// 设置文件名a.download = "统计表.xls"; //xlsxa.click();}
前端Table用JS导出Excel数字自动变成科学计数法问题相关推荐
- 【问题解决】xlwings处理excel复制粘贴时数字自动变成科学计数法
问题: 从一个excel里复制到另一个excel数据后,发现数字自动变成科学计数法,代码如下 import xlwings as xw app = xw.App(visible=False,add_b ...
- php导出数字成科学计数法,php导出excel长数字显示成科学计数法格式的解决方案...
php导出excel长数字显示成科学计数法格式的解决方案 首先,我们了解一下excel从web页面上导出的原理.当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所 ...
- html table导出excel 插入图片_前端 Table 用 JS 导出EXCEL(支持大量数据,保留报表格式) - pensive2019...
最近项目上,需要用到将网页上的table报表导出Excel.原先一直用,面对简单的数结构时只要简单的套用就能导出了,但是table结构相对复杂时,很难在组成一样结构,要花很多时间调:这时就想到在百度上 ...
- php 导出Excel 字符过长科学计数法
在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. 使用PHPExcel来生成excel,也会遇到同 ...
- java导出的excel数字过长_用POI导出excel时,较长的数字不想被自动变为科学计数法的解决方式(转)...
做过很多次导出excel了.都碰到一个问题,内容里如果包含一个比较长的数字,比如订单号"2546541656596",excel会自动变成科学计数法... 弄过好几次都没有解决,最 ...
- PHP 导出Excel的csv格式数字会自动变科学计数法 日期2019-04变成2019/4/1
导出csv文件数字会自动变科学计数法的解决方法 问题展示: 数据打印出格式: 解决方法: 只要把数字字段后面加上显示上看不见的字符即可,字符串前面或者结尾加上制表符"\t". ph ...
- MySQL使用Navicat导出Excel时数字展示会变成科学计数法
问题描述:MySQL使用Navicat导出Excel时数字会变成科学计数法 解决方法:"数据" 类型需要在导出时转成 "字符串" 类型 select CONCA ...
- mysql 导出过长的数字列时变科学计数法问题解决办法
mysql 导出过长的数字列时变科学计数法问题解决办法 参考文章: (1)mysql 导出过长的数字列时变科学计数法问题解决办法 (2)https://www.cnblogs.com/yangjinw ...
- 解决使用phpspreadsheet导出Xlsx纯数字字符串变成科学计数法的问题
Demo: <?php $spreadsheet = new \PhpOffice\PhpSpreadsheet\Spreadsheet(); $spreadsheet->getActiv ...
- 【实习小tip】elementUI表格数值加减和实时计算、导出数据并解决手机号科学计数法格式问题、git clone报错:OpenSSL SSL_connect: SSL_ERROR_SYSCALL
element表格数值加减和实时计算 实现效果: 代码: <el-table :data="voListForm" border show-summary :summary- ...
最新文章
- LearnOpenCV学习——平均脸faceAverage.py
- 中国人工智能源头创新的突破点在哪里?创投圈这么看
- linux终端安装cuda,Ubuntu下安装CUDA10.0以及问题
- FZU 1894 志愿者选拔
- 集成算法——Adaboost代码
- 浅谈数据库三大范式的理解
- 从标准到开发,解读基于MOF的应用模型管理
- ipv6正则表达式 java,用正则表达式解析IPv4跟IPv6地址字符串
- AI 对不起 我还爱着你
- POJ 2182 Lost Cows
- 打表法判断素数 c语言,素数打表(4种方法)
- IP库GeoLite2-City.mmdb的使用
- Java之将GB2312编码转化为汉字
- Word中插入公式后行距变大的解决办法
- python压缩解压缩_Python实现压缩和解压缩ZIP文件的方法分析
- QQ快速登录协议分析以及风险反思
- nod-1089-最长回文子串 V2
- ThinkPHP历史漏洞
- 钻石DIAMOND一词来源于古法文DIAMAUND钻石
- 解决ubuntu软件商店无法安装软件提示snap问题
热门文章
- SD和SDHC和SDXC卡的区别, class与u1/u3关系
- kodi连接远程服务器,私人影音服务器奶妈级入门篇(1)——Jellyfin for Kodi客户端设置方法...
- 计算机利弊英语作文带翻译,电脑的弊英语作文带翻译
- html的函数都有什么,yearfrac函数什么意思
- 戴尔DELL——G3-3590笔记本BIOS设置u盘启动
- wps画 ui 原型图
- windows 10 账号密码策略及规则
- linux文件夹的执行权限不够怎么解决
- JavaScript 全栈工程师培训教程
- 大数据未来趋势和实用价值