html转化excel为json对象,纯js前端json转exl的几种方法
第一种导出excel无需自己设置,直接根据json生成 (缺点:json数据全部展示,且只能按获取数据的顺序显示)
//json数据转excel
function JSONToExcelConvertor(JSONData, FileName) {
//先转化json
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = '
var row = "
";
//设置表头
var keys = Object.keys(JSONData[0]);
keys.forEach(function (item) {
row += "
" + item + '';
});
//换行
excel += row + "
";
//设置数据
for (var i = 0; i < arrData.length; i++) {
var row = "
";
for (var index in arrData[i]) {
console.log(arrData[i][index]);
//var value = arrData[i][index] === "." ? "" : arrData[i][index];
row += '
' + arrData[i][index] + '';
}
excel += row + "
";
}
excel += "
";
var excelFile = "";
excelFile += '';
excelFile += '';
excelFile += "
";
excelFile += "";
excelFile += "";
excelFile += "
";
excelFile += excel;
excelFile += "";
excelFile += "";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
第二种json排序,可手动设置数据显示(缺点:无法对列间距进行设置,生成的excel会挤在一起)
//导出访问路径Excel
function exportPathMethod(data) {
//要导出的json数据
var jsonData = [];
for(var i=0; i
jsonData.push({
index :i+1,
title: data[i].title,
url: data[i].url,
createTime :data[i].createTime
});
}
//列标题,逗号隔开,每一个逗号就是隔开一个单元格
let str = `序号,标题,地址,时间\n`; //增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n'; }
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
var link = document.createElement("a"); link.href = uri; //对下载的文件命名
link.download = "json数据表.xls";
document.body.appendChild(link);
link.click();
}
第三种方法 是为了解决返回的json数据中一些数据不想展示给用户时采取的措施
$('#wwo').click(function(){ //测试的json数据
var data3=[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24},
{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58} ,
{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77}] //自定义标题栏
var title=['用户名','性别','城市','签名','经验'] //自定义过滤栏(不需要导出的行)
var filter=['id','logins'] //原始导出
JSONToExcelConvertor(data3,"report"); //自定义导出
//JSONToExcelConvertor(data3,"report",title,filter);
});
});
function JSONToExcelConvertor(JSONData, FileName,title,filter) {
if(!JSONData)
return;
//转化json为object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = "
//设置表头
var row = "
";
if(title)
{
//使用标题项
for (var i in title) {
row += "
" + title[i] + '';
}
}
else{
//不使用标题项
for (var i in arrData[0]) {
row += "
" + i + '';
}
}
excel += row + "
";
//设置数据
for (var i = 0; i < arrData.length; i++) {
var row = "
";
for (var index in arrData[i]) {
//判断是否有过滤行
if(filter)
{
if(filter.indexOf(index)==-1) {
var value = arrData[i][index] == null ? "" : arrData[i][index];
row += '
' + value + '';
}
}
else
{
var value = arrData[i][index] == null ? "" : arrData[i][index];
row += "
" + value + "";
}
}
excel += row + "
";
}
excel += "
";
var excelFile = "";
excelFile += '';
excelFile += '';
excelFile += "
";
excelFile += "";
excelFile += "";
excelFile += "
";
excelFile += excel;
excelFile += "";
excelFile += "";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
再次简化:终极简化导出excel(一万条数据可在10秒内导出)
//json数据转excel
function JSONToOrderExcelConvertor(JSONData) {
var str = '序号,订单号,订单时间,主要用途,客户名称,电话,产品型号,是否形成有效线索\n';
for(let i=0;i
var result =''; if (JSONData[i].orderStatusc=='0'){ result="是";
} else {
result="否";
}
str += (i+1).toString()+','+JSONData[i].orderId+'\t'+','+formateOrderTime(JSONData[i].orderTime)+'\t'+','+JSONData[i].p1+'\t'+','+JSONData[i].userName+'\t'+','+JSONData[i].recMobile+'\t'+','+JSONData[i].productName+'\t'+','+result+'\t'+',\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 = "导出订单.xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
第四种、使用插件导出js
引入js
function JsonToExcel(jsonData,fileName,sheetName,sheetHeader) {
var option = {};
option.fileName = fileName;
option.datas = [
{
sheetData : jsonData,
sheetName : sheetName,
sheetHeader : sheetHeader
}
];
var toExcel=new ExportJsonExcel(option);
toExcel.saveExcel();
}
由于使用nginx ,数据量超过俩万条时,请求时间超出nginx要求的响应时间就会报504 链接超时
html转化excel为json对象,纯js前端json转exl的几种方法相关推荐
- js解析json字符串为json对象,js解析json的6种方法
1.一种为使用eval()函数. 方式如下: var dataObj=eval("("+data+")"); 为什么要加() 原因在于:eval本身的问题. 由 ...
- 前端学习之路坑一:json对象和JS对象
做登录验证的时候,前端Vue使用axios.post向后台php编写的API发送验证数据,发现无论如何都验证无法通过,返回值里带的POST数据显示发过去的都是JS对象 正值初学,也分不清数据格式,只看 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- 利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题
利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题 参考文章: (1)利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题 ( ...
- js之删除对象属性的三种方法 判断对象中是否有某一属性的四种方法
js之删除对象属性的三种方法 & 判断对象中是否有某一属性的四种方法 示例 1.基础版 var a = { id: 18, age: 20, name: "zhangsan" ...
- js获取DIV的位置坐标的三种方法!
js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- matlab合并有序数组,《数组合并》JS合并两个数组的3种方法详解
这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个包解决你所有的JS问题,点击获取 需要将两个数组 ...
- JS数组移除元素的八种方法
JS数组移除元素的八种方法 一.修改arr的length方法 let arr = [1,2,3,4,5,6,7,8,9]; arr.length = 3; console.log('length',a ...
最新文章
- 一个适合于Python 初学者的入门练手项目
- 不仅仅是写代码,而是完成作品
- muduo之channel
- 威宝推出支持四接口的桌面硬盘新品
- Can't connect to MySQL server on 'localhost' 10061
- 按单词逆序句子(含标点)
- matlab剩余寿命概率密度,分享关于评估设备剩余使用寿命的三种方法
- 逆水寒斩鸿蒙称号,逆水寒胆大包天称号怎么获得 逆水寒胆大包天称号获得方法一览...
- VS2015 调试代码时写入位置时发生访问冲突
- 多图详解Spring框架的设计理念与设计模式
- Software caused connection abort: socket write error 问题原因推测
- Overfeat 笔记
- VBA常用实例 | OUTLOOK批量下载选中邮件中的附件
- thinkphp6 循环 视图_ThinkPHP6 视图
- python爬虫之JS混淆加密、字体反爬
- 《开源之迷》:每天那么多人念叨的开源,究竟该如何解读?
- 用 Neo4j 快速构建明星关系图谱,你一定感兴趣
- 【分享】请回答1988(一)
- web字体 衬线字体与非衬线字体区别 字体扫盲
- pytorch 加权BCE_loss和加权CE_loss实现
热门文章
- 博士申请 | 美国宾夕法尼亚州立大学李宾老师组招收机器学习方向全奖博士生...
- Terraform 语法 resource
- AP与BB(应用处理器和基带处理器)
- android开发圆形Imageview图标实现
- 解决 Vue 中路由跳转相同路径页面不刷新的问题
- 计算机等级线下培训,线上线下齐发力,助跑计算机二级考试
- php自定义弹窗,微信小程序 弹窗自定义的代码
- 台式电脑脑计算机没法启动怎么办,电脑开不了热点怎么办
- 【AIGC】3、Visual ChatGPT | 支持图像/文本双输入的对话系统开源啦
- 为何新能源汽车用户在寒风中哀嚎?