javascript将json格式数组下载为excel表格的方法


Posted in Javascript onDecember 22, 2017

实例如下:

<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <script type="text/javascript" src="jquery183.min.js"></script> 
  <script type="text/javascript"> 
    $(document).ready(function(){ 
      $('#wwo').click(function(){ 
        var data = {
"title":
[
{"value":"A1标题"}, 
{"value":"B1标题"}
],
"data":
[
[
{"value":"好好"}, 
{"value":"2015-08-24"}
],
[
{"value":"123"}, 
{"value":"hahah"}
]
]
}; 
        if(data == ''){ 
          return; 
}else{
JSONToExcelConvertor(data.data, "Report", data.title); 
}
      }); 
    }); 
 
    function JSONToExcelConvertor(JSONData, FileName, ShowLabel) { 
      //先转化json 
      var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; 
       
      var excel = '<table>';   
       
      //设置表头 
      var row = "<tr>"; 
      for (var i = 0, l = ShowLabel.length; i < l; i++) { 
        row += "<td>" + ShowLabel[i].value + '</td>'; 
      } 
       
       
      //换行 
      excel += row + "</tr>"; 
       
      //设置数据 
      for (var i = 0; i < arrData.length; i++) { 
        var row = "<tr>"; 
         
        for (var index in arrData[i]) { 
          var value = arrData[i][index].value === "." ? "" : arrData[i][index].value; 
          row += '<td>' + value + '</td>'; 
        } 
         
        excel += row + "</tr>"; 
      } 
 
      excel += "</table>"; 
 
      var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"; 
      excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; 
      excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel'; 
      excelFile += '; charset=UTF-8">'; 
      excelFile += "<head>"; 
      excelFile += "<!--[if gte mso 9]>"; 
      excelFile += "<xml>"; 
      excelFile += "<x:ExcelWorkbook>"; 
      excelFile += "<x:ExcelWorksheets>"; 
      excelFile += "<x:ExcelWorksheet>"; 
      excelFile += "<x:Name>"; 
      excelFile += "{worksheet}"; 
      excelFile += "</x:Name>"; 
      excelFile += "<x:WorksheetOptions>"; 
      excelFile += "<x:DisplayGridlines/>"; 
      excelFile += "</x:WorksheetOptions>"; 
      excelFile += "</x:ExcelWorksheet>"; 
      excelFile += "</x:ExcelWorksheets>"; 
      excelFile += "</x:ExcelWorkbook>"; 
      excelFile += "</xml>"; 
      excelFile += "<![endif]-->"; 
      excelFile += "</head>"; 
      excelFile += "<body>"; 
      excelFile += excel; 
      excelFile += "</body>"; 
      excelFile += "</html>"; 
 
       
      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); 
    } 
  </script> 
</head> 
<body> 
  <input type="button" id="wwo" value="导出" /> 
</body> 
</html>

以上这篇javascript将json格式数组下载为excel表格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery动态添加删除一行数据示例
Jun 12 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
jQuery文字轮播特效
Feb 12 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
原生js实现移动端触摸轮播的示例代码
Dec 22 #Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 #Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 #Javascript
JavaScript实现单例模式实例分享
Dec 22 #Javascript
vue使用axios时关于this的指向问题详解
Dec 22 #Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 #Javascript
vue init失败简单解决方法(终极版)
Dec 22 #Javascript
You might like
Dedecms常用函数解析
2008/02/01 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
基于Vue制作组织架构树组件
2017/12/06 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python中Lambda表达式详解
2019/11/20 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
自我鉴定思想方面
2013/10/07 职场文书
2013的个人自我评价
2013/12/26 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
股东合作协议书
2014/04/14 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
批评与自我批评范文
2014/10/15 职场文书
体育教师个人总结
2015/02/09 职场文书
队名及霸气口号大全
2015/12/25 职场文书
python中的被动信息搜集
2021/04/29 Python