第一种导出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. 一个适合于Python 初学者的入门练手项目
  2. 不仅仅是写代码,而是完成作品
  3. muduo之channel
  4. 威宝推出支持四接口的桌面硬盘新品
  5. Can't connect to MySQL server on 'localhost' 10061
  6. 按单词逆序句子(含标点)
  7. matlab剩余寿命概率密度,分享关于评估设备剩余使用寿命的三种方法
  8. 逆水寒斩鸿蒙称号,逆水寒胆大包天称号怎么获得 逆水寒胆大包天称号获得方法一览...
  9. VS2015 调试代码时写入位置时发生访问冲突
  10. 多图详解Spring框架的设计理念与设计模式
  11. Software caused connection abort: socket write error 问题原因推测
  12. Overfeat 笔记
  13. VBA常用实例 | OUTLOOK批量下载选中邮件中的附件
  14. thinkphp6 循环 视图_ThinkPHP6 视图
  15. python爬虫之JS混淆加密、字体反爬
  16. 《开源之迷》:每天那么多人念叨的开源,究竟该如何解读?
  17. 用 Neo4j 快速构建明星关系图谱,你一定感兴趣
  18. 【分享】请回答1988(一)
  19. web字体 衬线字体与非衬线字体区别 字体扫盲
  20. pytorch 加权BCE_loss和加权CE_loss实现

热门文章

  1. 博士申请 | 美国宾夕法尼亚州立大学李宾老师组招收机器学习方向全奖博士生...
  2. Terraform 语法 resource
  3. AP与BB(应用处理器和基带处理器)
  4. android开发圆形Imageview图标实现
  5. 解决 Vue 中路由跳转相同路径页面不刷新的问题
  6. 计算机等级线下培训,线上线下齐发力,助跑计算机二级考试
  7. php自定义弹窗,微信小程序 弹窗自定义的代码
  8. 台式电脑脑计算机没法启动怎么办,电脑开不了热点怎么办
  9. 【AIGC】3、Visual ChatGPT | 支持图像/文本双输入的对话系统开源啦
  10. 为何新能源汽车用户在寒风中哀嚎?