JS前端--数据导出为EXCEL（支持大量数据导出）
管教女仆小游戏,七七购物,查开房记录 网址 us
js前端--数据导出为excel(支持大量数据导出)
数据导出为excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法，供大家使用。
1、activexobject(“excel.application”)
这种方法只能在ie下使用。
优点：参照vba控制excel对象。(代码不会的可以录制宏)
缺点：引用cell对象太慢，上万行数据导出时间超过2分钟
2、以table方式导出为html文件。
3、以csv方式导出。
使用中发现如果数据较多，上述第2、3中方法会失效，因此又整理了第4种方法。
第4种方法在ie10、chrome测试通过
以table格式导为xls文件导出
导出csv文件导出
大量数据导出csv导出
<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 = '
| name | id |
';
//具体数值 遍历
for(let i = 0;i < jsondata.length;i++){="" str="" +='
' ;="" for(let="" item="" in="" jsondata[i]){="" var="" cellvalue="jsondata[i][item];" 不让表格显示科学计数法或者其他格式="" 方法1="" tr里面加="" 方法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 = `
`;
//下载模板
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=""><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>="">
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
点击进行留言回复
相关文章:
-
-
-
详解CSS3新增的背景属性
CSS3新增属性：background-clip ，background-origin ， background-size，本文给大家分享CSS3新增的背景属性...
[阅读全文]
-
-
-
CSS3 旋转立方体问题详解
这篇文章主要介绍了CSS3 旋转立方体问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
Grid 宫格常用布局的实现
这篇文章主要介绍了Grid 宫格常用布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
-
-
CSS3实现网站商品展示效果图
这篇文章主要介绍了CSS3实现网站商品展示效果图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习...
[阅读全文]
-
我要评论
网友评论