js实现数据导出为EXCEL(支持大量数据导出)


Posted in Javascript onMarch 31, 2020

数据导出为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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 #Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 #Javascript
js实现整体缩放页面适配移动端
Mar 31 #Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 #Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 #Javascript
功能完善的小程序日历组件的实现
Mar 31 #Javascript
小程序双头slider选择器的实现示例
Mar 31 #Javascript
You might like
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
退休感言
2014/01/28 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
故宫英文导游词
2015/01/31 职场文书
前台接待岗位职责
2015/02/03 职场文书
个人工作违纪检讨书
2015/05/05 职场文书