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

前端Table用JS导出Excel数字自动变成科学计数法问题_第1张图片

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


1
我在想我能不能在调用导出Excel的公共方法中做处理,给他加上呢,
发现调用导出Excel的公共方法中可以做批量修改,(直接贴上改后代码)

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,',
      template = ' {table}
', 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(/

其实就是在点击导出按钮的时候,生成的table表格的td使用正则动态替换成:

appendHtml = appendHtml.replace(/

此时问题完美解决,不会再根据科学计数法展示表格内容!

完整代码片段:

exportExcel () {
        // 使用outerHTML属性获取整个table元素的HTML代码(包括标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码
        let tableHtml = document.getElementsByClassName("creditrecord");
        var appendHtml = "";
        for(var i=0;i";
// 实例化一个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();
}

 

你可能感兴趣的:(表格导出,科学计数法)