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制作的幻灯片图集效果打包下载
Feb 12 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
javascript数组去重方法分析
Dec 15 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
vue框架中props的typescript用法详解
Feb 17 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 mysql数据库操作分页类
2008/06/04 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
php探针不显示内存解决方法
2019/09/17 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
写自荐信的七个技巧
2013/10/15 职场文书
个人求职信范文分享
2014/01/31 职场文书
文科生自我鉴定
2014/02/15 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
门卫岗位职责
2015/02/09 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
《藏戏》教学反思
2016/02/23 职场文书
python区块链实现简版工作量证明
2022/05/25 Python