数据导出为excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法,供大家使用。
1、ActiveXObject(“Excel.Application”)
这种方法只能在IE下使用。
优点:参照VBA控制excel对象。(代码不会的可以录制宏)
缺点:引用cell对象太慢,上万行数据导出时间超过2分钟
2、以Table方式导出为html文件。
3、以CSV方式导出。
使用中发现如果数据较多,上述第2、3中方法会失效,因此又整理了第4种方法 toLargerCSV。
第4种方法在IE10、chrome测试通过
导出
导出
导出
//以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);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。