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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 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
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
nodejs基础应用
2017/02/03 NodeJs
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
利用node.js如何创建子进程详解
2017/12/09 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
Less 安装及基本用法
2018/05/05 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python解析json代码实例解析
2019/11/25 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
Python调用JavaScript代码的方法
2020/10/27 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
项目经理岗位职责范本
2015/04/01 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
JavaScript中reduce()的用法
2022/05/11 Javascript