JS前端--数据导出为EXCEL(支持大量数据导出)
2018-11-02 23:26
501 查看
数据导出为excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法,供大家使用。
1、ActiveXObject(“Excel.Application”)
这种方法只能在IE下使用。
优点:参照VBA控制excel对象。(代码不会的可以录制宏)
缺点:引用cell对象太慢,上万行数据导出时间超过2分钟
2、以Table方式导出为html文件。
3、以CSV方式导出。
使用中发现如果数据较多,上述第2、3中方法会失效,因此又整理了第4种方法。
第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); } function toLargerCSV(){ 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导出数据为excel----2
- JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
- JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
- java web开发中大量数据导出Excel超时(504)问题解决
- 纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例
- SpringBoot+AngularJS导出数据库数据到excel
- 用js导出数据到Excel文档
- Json数据导出Excel(IE10支持)
- 解决java web开发中常见的大量数据导出Excel超时(504)问题
- java代码导出数据到Excel、js导出数据到Excel(三)
- js导出excel页面数据
- net控件中数据导到Excel的格式 首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所以把mime类型设为:application/vnd.ms-excel,当excel读取文件时会以每个cell的格式呈现数据,如果cell没有规定的格式,则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间,当然我们必须使用excel支持的格式。下面就列出常用的一些格式: 1) 文本
- 1.大量数据导出Excel 之 多重影分身之术
- js实现导出数据到excel
- 使用python将大量数据导出到Excel中的小技巧分享
- js导出页面表格数据到Excel
- 导出大量数据到Excel的一种方式
- .NET使用Office Open XML导出大量数据到 Excel
- js把html中的table数据导出到Excel中