js+excel+mysql_js实现数据导出为EXCEL(支持大量数据导出)

数据导出为excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法,供大家使用。

1、ActiveXObject(“Excel.Application”)

这种方法只能在IE下使用。

优点:参照VBA控制excel对象。(代码不会的可以录制宏)

缺点:引用cell对象太慢,上万行数据导出时间超过2分钟

2、以Table方式导出为html文件。

3、以CSV方式导出。

使用中发现如果数据较多,上述第2、3中方法会失效,因此又整理了第4种方法 toLargerCSV。

第4种方法在IE10、chrome测试通过

以Table格式导为xls文件

导出

导出CSV文件

导出

大量数据导出CSV

导出

//以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 = '

nameid';

//具体数值 遍历

for(let i = 0;i < jsonData.length;i++){

str += '

';

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+=`

${cellvalue}`;

// str+=`

${cellvalue}`;

}

str+='

';

}

var worksheet = '导出结果'

var uri = 'data:application/vnd.ms-excel;base64,';

//下载的表格模板数据

var template = `

xmlns:x="urn:schemas-microsoft-com:office:excel"

xmlns="http://www.w3.org/TR/REC-html40">

`;

//下载模板

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);

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值