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 (六) jquery中的AJAX使用
Feb 23 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php 文章采集正则代码
2009/12/28 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php绘制圆形的方法
2015/01/24 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python实现输入数字的连续加减方法
2018/06/22 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
学校安全检查制度
2014/01/27 职场文书
七一建党日演讲稿
2014/09/05 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Python之matplotlib绘制折线图
2022/04/13 Python