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 相关文章推荐
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
JS实现简单抖动效果
Jun 01 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
用webAPI实现图片放大镜效果
Nov 23 Javascript
JavaScript异步操作中串行和并行
Nov 20 Javascript
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中mkdir函数用法实例分析
2014/11/15 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
详解Python装饰器由浅入深
2016/12/09 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python实现泊松图像融合
2018/07/26 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Django实现celery定时任务过程解析
2020/04/21 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
初二生物教学反思
2014/02/03 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
AJAX学习笔记
2021/05/18 Javascript
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android