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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
js实现九宫格布局效果
May 28 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
yii上传文件或图片实例
2014/04/01 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python列表的常用操作方法小结
2016/05/21 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python多进程间通信代码实例
2019/09/30 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
业务部主管岗位职责
2014/01/29 职场文书
民族团结先进个人材料
2014/02/05 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
社团活动总结怎么写
2014/06/30 职场文书
先进单位事迹材料
2014/12/25 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python