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 相关文章推荐
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
7个JS基础知识总结
Mar 05 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
Vue表单实例代码
Sep 05 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 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实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP时间函数使用详解
2019/03/21 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
JavaScript中定义函数的三种方法
2015/03/12 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
js变量提升深入理解
2016/09/16 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
vue prop属性传值与传引用示例
2019/11/13 Javascript
Python字符转换
2008/09/06 Python
详解Django中的form库的使用
2015/07/18 Python
解决python "No module named pip" 的问题
2018/10/13 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Python容器类型公共方法总结
2020/08/19 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
导游的职业规划书范文
2013/12/27 职场文书
元旦晚会策划方案
2014/02/18 职场文书
2014国培学习感言
2014/03/05 职场文书
班主任寄语大全
2014/04/04 职场文书
金融专业求职信
2014/08/05 职场文书
车队安全员岗位职责
2015/02/15 职场文书
迎国庆主题班会
2015/08/17 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL