脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript将json格式数组下载为excel表格

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

 更新时间：2017年12月22日 10:04:09   作者：天步  
下面小编就为大家分享一篇javascript将json格式数组下载为excel表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

实例如下：

<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表格的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js清除浏览器缓存的几种方法

    js清除浏览器缓存的几种方法

    本文主要介绍了js清除浏览器缓存的几种方法，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • js左侧三级菜单导航实例代码

    js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧，它的实现过程也并不复杂，下面有个不错的示例，感兴趣的朋友可以了解下
    2013-09-09
  • 如何通过setTimeout理解JS运行机制详解

    如何通过setTimeout理解JS运行机制详解

    这篇文章主要给大家介绍了关于如何通过setTimeout理解JS运行机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 重学JS 系列：聊聊继承(推荐)

    重学JS 系列：聊聊继承(推荐)

    这篇文章主要介绍了JS继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Js实现简单的小球运动特效

    Js实现简单的小球运动特效

    这篇文章主要介绍了Js实现简单的小球运动特效的相关资料,需要的朋友可以参考下
    2016-02-02
  • 解决layui 表单元素radio不显示渲染的问题

    解决layui 表单元素radio不显示渲染的问题

    今天小编就为大家分享一篇解决layui 表单元素radio不显示渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序 参数传递实例代码

    微信小程序 参数传递实例代码

    这篇文章主要介绍了微信小程序 参数传递实例代码的相关资料,需要的朋友可以参考下
    2017-03-03
  • JavaScript进阶练习及简单实例分析

    JavaScript进阶练习及简单实例分析

    下面小编就为大家带来一篇JavaScript进阶练习及简单实例分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js判断登录与否并确定跳转页面的方法

    js判断登录与否并确定跳转页面的方法

    这篇文章主要介绍了js判断登录与否并确定跳转页面的方法,涉及Ajax及session使用的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • uniapp 如何设置 tabbar 的 midButton 按钮

    uniapp 如何设置 tabbar 的 midButton 按钮

    在UniApp开发中,设置TabBar的midButton按钮可以增加用户交互的便利性,本文介绍了在App.vue中监听事件的方法,并提供了官方文档链接作为参考,通过这种方式可以实现TabBar中的特殊按钮功能,提升应用的用户体验
    2024-10-10

最新评论