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 相关文章推荐
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
ES6入门教程之let、const的使用方法
Apr 13 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匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
详解Python字典的操作
2019/03/04 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
周鸿祎:教你写创业计划书
2013/12/30 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
请假条范文大全
2014/04/10 职场文书
婚假请假条怎么写
2014/04/10 职场文书
作文评语大全
2014/04/23 职场文书
计算机专业求职信
2014/06/02 职场文书
生物科学专业自荐书
2014/06/20 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
员工保密协议书
2014/09/27 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书