前端Table用JS导出Excel数字自动变成科学计数法问题

最新推荐文章于 2024-05-21 14:27:27 发布

石金豆

最新推荐文章于 2024-05-21 14:27:27 发布

阅读量3.6k

点赞数 3

文章标签：表格导出科学计数法

本文链接：https://blog.csdn.net/qq_41864575/article/details/103243630

版权

前端导出的表格，类似于这种样式的解决办法分析出原因，使用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中,将数据转成String
	table.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 URL
        a.href = URL.createObjectURL(blob);
        // 设置文件名
        a.download = "统计表.xls";  //xlsx
        a.click();
      }

石金豆

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
前端Table用JS导出Excel数字自动变成科学计数法问题

前端导出的表格，类似于这种样式的解决办法分析出原因，使用JS将Table数据导出到Excel中，如果td中书纯数字的话，在Excel格式就是number类型，所以，想长数字会变成科学计数法。于是乎就在网上百度找对应的解决办法，在转换导入到Excel前给给类型变成字符串String类型。百度上是这样的，在td中加一个样式 style=‘mso-number-format:"@"’,如这样的...
复制链接

扫一扫