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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
原生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
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
PHP强制转化的形式整理
2020/05/22 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript multibox 全选
2009/03/22 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
浅谈Python单向链表的实现
2015/12/24 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python实现智能语音天气预报
2019/12/02 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
大专生自荐信
2013/10/04 职场文书
函授本科毕业生自我鉴定
2013/10/16 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python