JS前端--数据导出为EXCEL（支持大量数据导出）

数据导出为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>

JS前端--数据导出为EXCEL（支持大量数据导出）相关推荐

文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
JS前端创建html或json文件并浏览器导出下载
一.HTML与文件下载如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large.jpg" ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
博图WINCC报表（SQL数据库的建立，TIA_wincc在数据库中保存和查询数据，调用Excel模板把数据保存到指定的位置）
这里写目录标题目录一.概述 1.1 前言 1.2 主要功能 1.3 使用的软件二. SQL server建库和建表 2.1.SQL server建库 2.2SQL server建表三.建立wi ...
python爬虫excel数据_最简单的爬数据方法：Excel爬取数据，仅需6步
原标题:最简单的爬数据方法:Excel爬取数据,仅需6步在看到这篇文章的时候,大家是不是都还停留在对python爬虫的迷恋中,今天就来教大家怎样使用微软的Excel爬取一个网页的后台数据,注:此方法 ...
html table导出excel 插入图片_前端 Table 用 JS 导出EXCEL(支持大量数据，保留报表格式) - pensive2019...
最近项目上,需要用到将网页上的table报表导出Excel.原先一直用,面对简单的数结构时只要简单的套用就能导出了,但是table结构相对复杂时,很难在组成一样结构,要花很多时间调:这时就想到在百度上 ...
纯JavaScript 实现JSON数据导出到Excel(支持多个Sheet页)
核心思想: 拿到JSON 格式的数据后,使用JS逻辑生成符合 EXCEL格式规范的XML字符串然后转字符串内容把换成一个Blob 实例对象最后通过临时创建的一个A标签通过触发它的点击事件模拟浏览 ...
vue实现纯前端导入与解析excel表格文件，导出Excel
一.安装相关依赖 npm install --save xlsx file-saver 二.使用 import * as XLSX from 'xlsx/xlsx.mjs' const FileSav ...
C#将dataGridView中显示的数据导出到Excel（大数据量超实用版）
开发中很多情况下需要将dataGridView控件中显示的数据结果以Excel或者Word的形式导出来,本例就来实现这个功能.由于从数据库中查找出某些数据列可能没必要显示出来,在dataGridVie ...
php mysql 导出到excel,php mysql数据导出到excel文件
这篇文章主要为大家详细介绍了php mysql数据导出到excel文件,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. 经测试代码如下: /** * ...

JS前端--数据导出为EXCEL（支持大量数据导出）

JS前端--数据导出为EXCEL（支持大量数据导出）相关推荐

最新文章

热门文章