第一种导出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的几种方法相关推荐

  1. js解析json字符串为json对象,js解析json的6种方法

    1.一种为使用eval()函数. 方式如下: var dataObj=eval("("+data+")"); 为什么要加() 原因在于:eval本身的问题. 由 ...

  2. 前端学习之路坑一:json对象和JS对象

    做登录验证的时候,前端Vue使用axios.post向后台php编写的API发送验证数据,发现无论如何都验证无法通过,返回值里带的POST数据显示发过去的都是JS对象 正值初学,也分不清数据格式,只看 ...

  3. 纯JS前端分页方法(JS分页)

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  4. 利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题

    利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题 参考文章: (1)利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题 ( ...

  5. js之删除对象属性的三种方法 判断对象中是否有某一属性的四种方法

    js之删除对象属性的三种方法 & 判断对象中是否有某一属性的四种方法 示例 1.基础版 var a = { id: 18, age: 20, name: "zhangsan" ...

  6. js获取DIV的位置坐标的三种方法!

    js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...

  7. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  8. matlab合并有序数组,《数组合并》JS合并两个数组的3种方法详解

    这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个包解决你所有的JS问题,点击获取 需要将两个数组 ...

  9. JS数组移除元素的八种方法

    JS数组移除元素的八种方法 一.修改arr的length方法 let arr = [1,2,3,4,5,6,7,8,9]; arr.length = 3; console.log('length',a ...

最新文章

  1. 网速测量、流量监控软件 Bandwidth Meter Pro
  2. 268. Missing Number
  3. typecast java_Java中的类型转换
  4. mysql 两个数据库指定表同步_mysql从2个数据库中同步两个表
  5. GitLab 自动触发 Jenkins 构建
  6. ./configure --prefix
  7. 移动端页面(响应式)
  8. EXTASPNET C# ASP.NET sql server 调用存储过程超时,解决方法
  9. vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
  10. 网络文件系统访问与ftp服务
  11. Android上Sensor移植的总结
  12. java里面的pai_Java - ZhangPai - 博客园
  13. matlab系统数学模型建立,第五章 matlabsimulink下数学模型的建立
  14. 南大计算机专业考研2019分数,南京大学2019考研分数线公布
  15. win远程桌面连接服务器,WIN2016远程桌面服务器如何同时发布APP和桌面
  16. YDOOK:版权C符号:怎样在任何地方 任何位置快速输入版权符号 © 快捷键
  17. JAVA生成随机昵称
  18. 清远市高中计算机考试时间,2017年清远市中考体育考试安排
  19. 银行职业性格测试软件,2018银行春招:不要小看银行性格测试
  20. jsonViewer json格式化工具

热门文章

  1. 蓝桥杯 调手表【BFS】
  2. 【WP】hgame2023 week4 Pwn
  3. 290、三角形的最大周长
  4. JAVA 产生随机数 排序 输出显示
  5. 请将文件MP_verify_xxxxxx.txt上传至填写域名或路径指向的web服务器(或虚拟主机)的目录 已解决
  6. dockerfile制作:制作python3下的robotframework运行环境
  7. 应用中卡片做花边效果实现
  8. 设计模式之装饰者模式及观察者模式
  9. 3.3V和5V电平双向转换——NMOS管
  10. count(字段),count(*)和count(1)的区别