编程 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中的array数组使用技巧

Jan 31 Javascript

json的定义、标准格式及json字符串检验

May 11 Javascript

Javascript Objects详解

Sep 04 Javascript

js实现图片漂浮效果的方法

Mar 02 Javascript

举例简介AngularJS的内部语言环境

Jun 17 Javascript

jquery带下拉菜单和焦点图代码分享

Aug 24 Javascript

jQuery实现鼠标滚动图片延迟加载效果附源码下载

Jun 28 Javascript

微信小程序配置顶部导航条标题颜色的实现方法

Sep 20 Javascript

Vue下滚动到页面底部无限加载数据的示例代码

Apr 22 Javascript

解决vue点击控制单个样式的问题

Sep 05 Javascript

vue router带参数页面刷新或回退参数消失的解决方法

Feb 27 Javascript

详解vue中的父子传值双向绑定及数据更新问题

Jun 13 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 var_dump遍历对象属性的函数与应用代码

2010/06/04 PHP

用 Composer构建自己的 PHP 框架之基础准备

2014/10/30 PHP

ThinkPHP进程计数类Process用法实例详解

2015/09/25 PHP

PHP创建PowerPoint2007文档的方法

2015/12/10 PHP

javascript之大字符串的连接的StringBuffer 类

2007/05/08 Javascript

javascript开发技术大全－第3章 js数据类型

2011/07/03 Javascript

jQuery制作仿腾讯web qq用户体验桌面

2013/08/20 Javascript

基于jquery实现发送文章到手机的代码

2014/12/26 Javascript

javascript自动生成包含数字与字符的随机字符串

2015/02/09 Javascript

javascript制作游戏开发碰撞检测的封装代码

2015/03/31 Javascript

JavaScript实现跨浏览器的添加及删除事件绑定函数实例

2015/08/04 Javascript

jQuery使用$.ajax进行即时验证的方法

2015/12/08 Javascript

AngularJS ngModel实现指令与输入直接的数据通信

2016/09/21 Javascript

基于layer.js实现收货地址弹框选择然后返回相应的地址信息

2017/05/26 Javascript

基于node.js之调试器详解

2017/08/22 Javascript

使用socket.io制做简易WEB聊天室

2018/01/02 Javascript

通过 JS 判断页面是否有滚动条的实现方法

2018/04/05 Javascript

vue组件jsx语法的具体使用

2018/05/21 Javascript

实例分析编写vue组件方法

2019/02/12 Javascript

uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

2020/12/10 Javascript

[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角

2020/11/03 DOTA

插入排序_Python与PHP的实现版(推荐)

2017/05/11 Python

18个Python脚本可加速你的编码速度(提示和技巧)

2019/10/17 Python

详解pycharm连接不上mysql数据库的解决办法

2020/01/10 Python

python tkinter之复选、文本、下拉的实现

2020/03/04 Python

Django高并发负载均衡实现原理详解

2020/04/04 Python

如何更换python默认编辑器的背景色

2020/08/10 Python

JD Sports法国：英国篮球和运动时尚的领导者

2017/09/28 全球购物

科颜氏英国官网：Kiehl’s英国

2019/11/20 全球购物

社区平安建设方案

2014/05/25 职场文书

事业单位人员的自我评价范文

2014/09/21 职场文书

民政局离婚协议书范本

2014/10/20 职场文书

小学语文教师研修日志

2015/11/13 职场文书

基于Redis位图实现用户签到功能

2021/05/08 Redis

实例讲解Python中sys.argv[]的用法

2021/06/03 Python

清空 Oracle 安装记录并重新安装

2022/04/26 Oracle