编程 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 阻止javascript事件冒泡，获取控件ID值

Jun 27 Javascript

javascript 跨浏览器开发经验总结（五） js 事件

May 19 Javascript

jQuery获取Select选择的Text和Value(详细汇总)

Jan 25 Javascript

原生js实现跨浏览器获取鼠标按键的值

Apr 08 Javascript

js格式化输入框内金额、银行卡号

Feb 01 Javascript

js生成随机颜色方法代码分享（三种）

Dec 29 Javascript

js中的DOM模拟购物车功能

Mar 22 Javascript

JavaScript 下载svg图片为png格式

Jun 21 Javascript

详解vue2.0监听属性的使用心得及搭配计算属性的使用

Jul 18 Javascript

浅谈JavaScript 代码整洁之道

Oct 23 Javascript

微信网页登录逻辑与实现方法

Apr 29 Javascript

webpack-mvc 传统多页面组件化开发详解

May 07 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中trim()函数简单使用指南

2015/04/16 PHP

用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载

2007/08/08 Javascript

jQuery实现图片渐入渐出切换展示效果

2015/08/15 Javascript

javascript适合移动端的日期时间拾取器

2015/11/10 Javascript

学习javascript面向对象掌握创建对象的9种方式

2016/01/04 Javascript

js编写一个简单的产品放大效果代码

2016/06/27 Javascript

AngularJs 国际化（I18n/L10n）详解

2016/09/01 Javascript

Javascript函数中的arguments.callee用法实例分析

2016/09/16 Javascript

js 实现一些跨浏览器的事件方法详解及实例

2016/10/27 Javascript

javascript 利用arguments实现可变长参数

2016/11/21 Javascript

关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

2017/05/12 Javascript

Vue的H5页面唤起支付宝支付功能

2019/04/18 Javascript

使用vue-cli3+typescript的项目模板创建工程的教程

2020/02/28 Javascript

完美解决vue 中多个echarts图表自适应的问题

2020/07/19 Javascript

vue Treeselect下拉树只能选择第N级元素实现代码

2020/08/31 Javascript

[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

python3+PyQt5+Qt Designer实现堆叠窗口部件

2018/04/20 Python

点球小游戏python脚本

2018/05/22 Python

python 函数中的内置函数及用法详解

2019/07/02 Python

Python split() 函数拆分字符串将字符串转化为列的方法

2019/07/16 Python

django之自定义软删除Model的方法

2019/08/14 Python

基于Python数据结构之递归与回溯搜索

2020/02/26 Python

Django Path转换器自定义及正则代码实例

2020/05/29 Python

keras在构建LSTM模型时对变长序列的处理操作

2020/06/29 Python

Python os库常用操作代码汇总

2020/11/03 Python

英国领先的酒类网上商城：TheDrinkShop

2017/03/16 全球购物

生产总经理岗位职责

2013/12/19 职场文书

写演讲稿要注意的六件事

2014/01/14 职场文书

公立医院改革实施方案

2014/03/14 职场文书

祖国在我心中演讲稿500字

2014/05/04 职场文书

产品生产计划书

2014/05/07 职场文书

广告艺术设计专业自荐书

2014/07/08 职场文书

党的群众路线查摆剖析材料

2014/10/10 职场文书

先进基层党组织材料

2014/12/25 职场文书

家属答谢词

2015/01/05 职场文书

中学后勤工作总结2015

2015/07/22 职场文书