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 ...
最新文章
- 网速测量、流量监控软件 Bandwidth Meter Pro
- 268. Missing Number
- typecast java_Java中的类型转换
- mysql 两个数据库指定表同步_mysql从2个数据库中同步两个表
- GitLab 自动触发 Jenkins 构建
- ./configure --prefix
- 移动端页面(响应式)
- EXTASPNET C# ASP.NET sql server 调用存储过程超时,解决方法
- vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
- 网络文件系统访问与ftp服务
- Android上Sensor移植的总结
- java里面的pai_Java - ZhangPai - 博客园
- matlab系统数学模型建立,第五章 matlabsimulink下数学模型的建立
- 南大计算机专业考研2019分数,南京大学2019考研分数线公布
- win远程桌面连接服务器,WIN2016远程桌面服务器如何同时发布APP和桌面
- YDOOK:版权C符号:怎样在任何地方 任何位置快速输入版权符号 © 快捷键
- JAVA生成随机昵称
- 清远市高中计算机考试时间,2017年清远市中考体育考试安排
- 银行职业性格测试软件,2018银行春招:不要小看银行性格测试
- jsonViewer json格式化工具
热门文章
- 蓝桥杯 调手表【BFS】
- 【WP】hgame2023 week4 Pwn
- 290、三角形的最大周长
- JAVA 产生随机数 排序 输出显示
- 请将文件MP_verify_xxxxxx.txt上传至填写域名或路径指向的web服务器(或虚拟主机)的目录 已解决
- dockerfile制作:制作python3下的robotframework运行环境
- 应用中卡片做花边效果实现
- 设计模式之装饰者模式及观察者模式
- 3.3V和5V电平双向转换——NMOS管
- count(字段),count(*)和count(1)的区别