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 Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php抽象类用法实例分析
2015/07/07 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
Python hmac模块使用实例解析
2019/12/24 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
基于python实现文件加密功能
2020/01/06 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Linux的主要特性
2014/10/06 面试题
财务主管岗位职责
2014/02/28 职场文书
文明市民先进事迹
2014/05/15 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
简易版租房协议书范本
2014/10/13 职场文书
五年级上册复习计划
2015/01/19 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL