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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
通过Javascript将数据导出到外部Excel文档的函数代码
复制代码 代码如下: function AutomateExcel() { try { //Start Excel and get Application object. var oXL; try { oXL = new ActiveXObject("Excel.Application"); } catch(e) { alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel," + "那么请调整IE的安全级别.\n\n具体操作:\
-
Nodejs获取网络数据并生成Excel表格
Nodejs的模版中有很多关于Excel表格的,这里我简单介绍一下我使用过的一个模块的使用. 首先,先安装Excel的模块: npm install node-xlsx 然后,在代码中引入模块: var xlsx = require('node-xlsx'); 最后,获取数据并写入Excel: var fs = require('fs'); var xlsx = require('node-xlsx'); var ajax = require('./ajax.js'); start(); fun
-
Vue导出json数据到Excel电子表格的示例
网上看了很多文档感觉都不全,这里写一篇完整的详细教程. 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.下载两个所需要的js文件Blob.js和 Export2Excel.js. 这里贴下下载地址: Export2Exce_jb51.rar 三.src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js
-
js导出table数据到excel即导出为EXCEL文档的方法
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
AngularJs导出数据到Excel的示例代码
公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家. 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML <div id="exportable"> <table width="100%"> <thead> <tr> <th>Na
-
js读取本地excel文档数据的代码
复制代码 代码如下: <script> function readThis(){ var tempStr = ""; var filePath= document.all.upfile.value; var oXL = new ActiveXObject("Excel.application"); var oWB = oXL.Workbooks.open(filePath); oWB.worksheets(1).select(); var oSheet
-
用javascript将数据导入Excel示例代码
网上收集的代码 <input type="button" name="out_excel" onclick="AutomateExcel();" value="导出到excel" class="notPrint"> 导出到Excel代码 <SCRIPT LANGUAGE="javascript"> <!-- function AutomateExcel()
-
javascript 导出数据到Excel(处理table中的元素)
做法: 修改Input的outerHTML; 具体例子: 复制代码 代码如下: function resetInput() { var controls = document.getElementsByTagName('input'); for(var i=0; i<controls.length; i++){ if(controls[i].type=='text') { if(controls[i].value =="") { controls[i].outerHTML=&qu
-
利用Javascript仿Excel的数据透视分析功能
什么是数据透视分析? 数据透视分析就是要在 不同维度对数据进行汇总,过滤,分析,比较,作图.用来发现数据的变化趋势和不同因素导致的差异. 这在销售,统计,金融 等方面十分有用,常常会在一些管理软件中使用. 接下来使用Excel介绍了什么是数据透视分析和数据透视表. 下面我使用 Excel的数据透视表 来分析 iPhone手机2013,2014 和2015 年在中国和美国的销售量数据,以总结iPhone手机的销售趋势. 申明:所有数据都是自己编造的,无任何参考价值. Excel 数据透视表和数据透
-
JS 巧妙获取剪贴板数据 Excel数据的粘贴
另外的方法就是用flash了,它可以避开浏览器的安全限制,但是system类中只有set的方法,另外的clipboard类中倒是能访问到,但是似乎需要flash10的版本支持. 网上找了一圈,没啥发现.终于想到去看看google sheet是怎么干的. 发现google sheet实现了excel的纯文本的多数据格粘贴,没有安全限制的需要,没有使用flash.可能很多人都知道这种方法了,反正我一开始很惊讶的,但是无奈,google的js文件是处理过的,看起来太累了.然后又去找ZOHO sheet