js实现数据导出为EXCEL（支持大量数据导出）

更新时间：2020年03月31日 16:06:44 作者：骊山大粽子

这篇文章主要为大家详细介绍了js实现数据导出为EXCEL，支持大量数据导出，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

数据导出为excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法，供大家使用。

1、ActiveXObject(“Excel.Application”)

这种方法只能在IE下使用。
优点：参照VBA控制excel对象。（代码不会的可以录制宏）
缺点：引用cell对象太慢，上万行数据导出时间超过2分钟

2、以Table方式导出为html文件。

3、以CSV方式导出。

使用中发现如果数据较多，上述第2、3中方法会失效，因此又整理了第4种方法 toLargerCSV。

第4种方法在IE10、chrome测试通过

<html>
<head>
 <div>以Table格式导为xls文件
 <button onclick='TableToExcel()'>导出</button></div>
 <div>导出CSV文件
 <button onclick='toCSV()'>导出</button></div>
 <div>大量数据导出CSV
 <button onclick='toLargerCSV()'>导出</button></div>
</head>
<body>
 <script>   
 //以Table格式导为xls文件
  function TableToExcel(){
   //要导出的json数据
   var jsonData = [
    {
     name:'001',
     id:'621699190001011231'
    },
    {
     name:'002',
     id:'52069919000101547X'
    },
    {
     name:'003',
     id:'423699190103015469'
    },
    {
     name:'004',
     id:'341655190105011749'
    }
   ]
  //导出前要将json转成table格式
   //列标题
   var str = '<tr><td>name</td><td>id</td></tr>';
   //具体数值 遍历
   for(let i = 0;i < jsonData.length;i++){
    str += '<tr>';
    for(let item in jsonData[i]){
  var cellvalue = jsonData[i][item];
      //不让表格显示科学计数法或者其他格式 
  //方法1 tr里面加 style="mso-number-format:'\@';" 方法2 是改为 = 'XXXX'格式 
  //如果纯数字且超过15位
  /*var reg = /^[0-9]+.?[0-9]*$/;
  if ((cellvalue.length>15) && (reg.test(cellvalue))){
  //cellvalue = '="' + cellvalue + '"';
  }*/
  //此处用`取代'，具体用法搜索模板字符串 ES6特性
      str+=`<td style="mso-number-format:'\@';">${cellvalue}</td>`; 
  // str+=`<td>${cellvalue}</td>`; 
    }
    str+='</tr>'; 
   }   
   var worksheet = '导出结果'
   var uri = 'data:application/vnd.ms-excel;base64,';
   //下载的表格模板数据
   var 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><!--[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>${str}</table></body></html>`;
   //下载模板
  function base64 (s) { return window.btoa(unescape(encodeURIComponent(s)))}
   window.location.href = uri + base64(template);
  }
  
 
 function toCSV(){
 //要导出的json数据
   var jsonData = [
    {
     name:'001',
     id:'621699190001011231'
    },
    {
     name:'002',
     id:'52069919000101547X'
    },
    {
     name:'003',
     id:'423699190103015469'
    },
    {
     name:'004',
     id:'341655190105011749'
    }
   ]
  //导出前要将json转成table格式
   //列标题
   var str = 'name,id\n';
   //具体数值 遍历
   for(let i = 0 ; i < jsonData.length ; i++ ){
    for(let item in jsonData[i]){
  
      //增加\t为了不让表格显示科学计数法或者其他格式
  //此处用`取代'，具体用法搜索模板字符串 ES6特性
      str+=`${jsonData[i][item] + '\t,'}`;   
    }
    str+='\n'; 
   }  
 let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
 var link = document.createElement("a");
 link.href = uri;
 link.download = "导出.csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
 }
 //支持大批量数据导出，目前测试15万行 30列通过，导出时间约为6秒
 function toLargerCSV(){
 //CSV格式可以自己设定，适用MySQL导入或者excel打开。
 //由于Excel单元格对于数字只支持15位，且首位为0会舍弃 建议用 =“数值” 
 
 var str = '行号,内容,题目,标题\n';
 
 for(let i=0;i<100000;i++){
  str += i.toString()+',1234567890123456789\t,张三李四王五赵六,bbbb,\n'
 }
 var blob = new Blob([str], {type: "text/plain;charset=utf-8"});  
 //解决中文乱码问题
 blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type}); 
 object_url = window.URL.createObjectURL(blob); 
 var link = document.createElement("a");
 link.href = object_url;
 link.download = "导出.csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);        
 }

</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

谈谈JavaScript令人迷惑的==与+
这篇文章主要介绍了JavaScript中==与+的使用方法，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-08-08
uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透解决办法
最近用uin-app做项目遇到了不少问题,下面这篇文章主要给大家介绍了关于uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-01-01
自定义函数实现IE7与IE8不兼容js中trim函数的问题
这篇文章主要介绍了自定义函数实现IE7与IE8不兼容js中trim函数的方法,涉及trim函数的重写与正则匹配的技巧,需要的朋友可以参考下
2015-02-02
简单谈谈javascript高级特性
看过很多关于js高级特性介绍的文章，本文是个人感觉最通俗易懂的，这里分享给大家，希望大家能够喜欢
2019-09-09
给自定义对象加上自定义事件的支持的教程
自从我写了几个还可以拿出手的东东之后，自我感觉牛B了许多，还有不少同志围着我，称我为高手，虚容心大大的得到了满足。这些是后话，暂且不表。。。
2008-03-03
BootStrap 附加导航组件
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识，感兴趣的朋友一起学习吧
2016-07-07
封装好的一个万能检测表单的方法
这篇文章主要介绍了一个封装好的万能检测表单的方法,非常的好用，使用也很方便，这里推荐给小伙伴们。
2015-01-01
全面了解addEventListener和on的区别
下面小编就为大家带来一篇全面了解addEventListener和on的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
js/jQuery简单实现选项卡功能
本篇文章主要是对js/jQuery简单实现选项卡功能的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
javascript中substring()、substr()、slice()的区别
在js中字符截取函数有常用的三个slice()、substring()、substr()了，下面我来给大家介绍slice()、substring()、substr()函数在字符截取时的一些用法与区别吧。
2015-08-08