编程 Javascript

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

- Author -

天步

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javaScript中两个等于号和三个等于号之间的区别介绍

Jun 27 Javascript

jQuery实现列表的全选功能

Mar 18 Javascript

使用JQuery实现智能表单验证功能

Mar 08 Javascript

纯JavaScript手写图片轮播代码

Oct 20 Javascript

JS实现一个简单的日历

Feb 22 Javascript

纯JS实现图片验证码功能并兼容IE6-8(推荐)

Apr 19 Javascript

Javascript实现base64的加密解密方法示例

Jun 27 Javascript

ReactNative Image组件使用详解

Aug 07 Javascript

vue父子模板传值问题解决方法案例分析

Feb 26 Javascript

vue实现分页的三种效果

Jun 23 Javascript

Vue中keep-alive组件的深入理解

Aug 23 Javascript

浅谈vue2的$refs在vue3组合式API中的替代方法

Apr 18 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

解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍

2013/06/24 PHP

回帖脱衣服的图片实现代码

2014/02/15 PHP

Thinkphp关闭缓存的方法

2015/06/26 PHP

php文件扩展名判断及获取文件扩展名的N种方法

2015/09/12 PHP

thinkphp微信开之安全模式消息加密解密不成功的解决办法

2015/12/02 PHP

thinkPHP框架动态配置用法实例分析

2018/06/14 PHP

javascript中input中readonly和disabled区别介绍

2012/10/23 Javascript

js 页面元素的几个用法总结

2013/11/18 Javascript

JS实现仿QQ聊天窗口抖动特效

2015/05/10 Javascript

JavaScript修改作用域外变量的方法

2016/03/25 Javascript

概述jQuery的元素筛选

2016/11/23 Javascript

axios基本入门用法教程

2017/03/25 Javascript

JavaScript基于扩展String实现替换字符串中index处字符的方法

2017/06/13 Javascript

Vue2.5通过json文件读取数据的方法

2018/02/27 Javascript

微信小程序首页的分类功能和搜索功能的实现思路及代码详解

2018/09/11 Javascript

angularJs中ng-model-options设置数据同步的方法

2018/09/30 Javascript

利用Electron简单撸一个Markdown编辑器的方法

2019/06/10 Javascript

react 移动端实现列表左滑删除的示例代码

2019/07/04 Javascript

微信小程序图片加载失败时替换为默认图片的方法

2019/12/09 Javascript

JS实现商品橱窗特效

2020/01/09 Javascript

vue使用keep-alive实现组件切换时保存原组件数据方法

2020/10/30 Javascript

Linux下将Python的Django项目部署到Apache服务器

2015/12/24 Python

python采集微信公众号文章

2018/12/20 Python

PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法

2019/08/06 Python

一篇文章搞定Python操作文件与目录

2019/08/13 Python

Python读取csv文件实例解析

2019/12/30 Python

深入了解Python装饰器的高级用法

2020/08/13 Python

如何给HTML标签中的文本设置修饰线

2019/11/18 HTML / CSS

Hotels.com日本：国外和海外住宿，酒店预订

2019/12/13 全球购物

Yahoo-PHP面试题4

2012/05/05 面试题

致200米运动员广播稿

2014/02/06 职场文书

小学生竞选班干部演讲稿

2014/04/24 职场文书

美术第二课堂活动总结

2014/07/08 职场文书

被告代理词范文

2015/05/25 职场文书

解决Pytorch修改预训练模型时遇到key不匹配的情况

2021/06/05 Python

解析redis hash应用场景和常用命令

2021/08/04 Redis