js实现导出数据到excel
来自：http://www.imooc.com/article/13374
//html代码<!DOCTYPE HTML>
<html>
<head>
<title>Adminstratior Platform</title>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/mui.min.css"/>
<link rel="stylesheet" href="../css/app1.css"/>
<link rel="stylesheet" href="../css/iconfont.css"/>
<script src="../js/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="../js/mui.min.js" type="text/javascript"></script>
</head>
<body>
<header id="adminstrator" class="mui-bar mui-bar-nav">
<div id="login" class="mui-btn mui-btn-primary">登陆</div>
<h1 class="mui-title">辅昊系统---电力监测</h1>
</header>
<div class="mui-content">
<div id="navs" class="col-sm-4">
<ul class="mui-table-view mui-grid-view mui-grid-9 ">
<li v-for="item in navs" id="{{item.id}}"
class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="javascript:;">
<span class="iconfont icon-{{item.imageUri.replace(/./,'')}}"></span>
<div class="mui-media-body" v-text='item.name'></div>
</a>
</li>
</ul>
</div>
<div id="lists" class="col-sm-8">
<div class="form-group">
<label>Search</label>
<input type="text" class="search-input" v-model="searchKey"/>
</div>
<simple-grid :persons="persons" :columns="columns" :search-key="searchKey">
</simple-grid>
<div id="JsonToExcel" class="mui-btn mui-btn-primary mui-pull-right" >JsonToExcel</div>
</div>
<template id="grid-template">
<table>
<thead>
<tr>
<th v-for="i in columns">
{{ i.name}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="i in persons filterBy searchKey">
<td v-for="j in columns">
{{i[j.name]}}
</td>
</tr>
</tbody>
</table>
</template>
</div>
</body>
<script>
$('#login').bind('click', function () {
alert('success');
});
$('#navs').delegate('li', 'click', function (e) {
e.stopPropagation();
$(this).find('span').toggleClass("chosen");
vm.persons.push({
"姓名": "Tracy",
"年龄": "22",
"性别": "Female"
});
});
</script>
<script src="../js/vue.js" type="text/javascript"></script>
<script src="../js/vue-resource.min.js" type="text/javascript"></script>
<script src="../js/demo-PC.js" type="text/javascript"></script>
</html>
//js代码
var navs = new Vue({
el: '#navs',
data: {
navs: []
},
ready: function () {
this.$http.get('demoPC.json').then(function (response) {
this.navs = response.data;
});
}
});
Vue.component('simple-grid', {
template: '#grid-template',
props: ['persons', 'columns', 'searchKey']
});
var vm = new Vue({
el: '#lists',
data: {
searchKey: '',
columns: [{
name: '姓名'
}, {
name: '年龄'
}, {
name: '性别'
}],
persons: []
},
ready: function () {
this.$http.get('table.json').then(function (response) {
this.persons = response.data.aa;
});
}
})
// 页面json数据生成excel表
$(function () {
$('#JsonToExcel').click(function () {
var data = {
"title": [],
"data": []
};
var th = document.querySelectorAll('#lists table>thead>tr>th');
for (var i = 0; i < th.length; i++) {
data.title.push(th[i].innerHTML);
};
var tdrs = document.querySelectorAll('#lists table>tbody>tr');
for (var i = 0; i < tdrs.length; i++) {
var ele = [];
for (var j = 2; j <=4; j++) {
ele.push(tdrs[i].childNodes[j].innerHTML);
}
data.data.push(ele);
}
if (data == '') {
return;
}
JSONToExcelConvertor(data.data, "辅昊--电力", 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; i < ShowLabel.length; i++) {
row += "<td>" + ShowLabel[i] + '</td>';
}
excel += row + "</tr>";
//循环生成表身
for (var i = 0; i < arrData.length; i++) {
var row = "<tr>";
for (var j in arrData[i]) {
// var name = arrData[i][index].name === "." ? "" : arrData[i][index].name;
var td = arrData[i][j];
row += '<td>' + td + '</td>';
}
excel += row + "</tr>";
}
excel += "</table>";
console.log(excel);
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 += "sheet";
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);
}
js实现导出数据到excel的更多相关文章
- java代码导出数据到Excel、js导出数据到Excel(三)
jsp内容忽略,仅写个出发按钮: <button style="width: 100px" onclick="expertExcel()&quo ...
- [js]EasyUI导出数据表格(Export DataGrid)
包括 'datagrid-export.js' 文件 <script type="text/javascript" src="datagrid-export.js& ...
- Java操作Jxl实现导出数据生成Excel表格数据文件
实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...
- 1.ASP.NET MVC使用EPPlus，导出数据到Excel中
好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangshe ...
- 导出数据到Excel --使用ExcelReport有感
先看图,这是几个月前用NPOI写的导出数据到Excel,用了上百行代码,而且难控制,导出来也比较难看 excel打开的效果 下面是我用ExcelReport类库导出到Excel的操作 1.首先引用Ex ...
- 使用Open xml 操作Excel系列之二--从data table导出数据到Excel
由于Excel中提供了透视表PivotTable,许多项目都使用它来作为数据分析报表. 在有些情况下,我们需要在Excel中设计好模板,包括数据源表,透视表等, 当数据导入到数据源表时,自动更新透视表 ...
- Dynamics CRM导出数据到Excel
原创地址:http://www.cnblogs.com/jfzhu/p/4276212.html 转载请注明出处 Pivot Table是微软BI的一个重要工具,所以这里讲一下Dynamics CRM ...
- MVC导出数据到EXCEL新方法：将视图或分部视图转换为HTML后再直接返回FileResult
导出EXCEL方法总结 MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可: 优点:可设置丰富的EXC ...
- php导出数据到excel,防止身份证等数字字符格式变成科学计数的方法
而关于php的也有,但是大多都是用phpExcel导出的方法或者spreadsheet等类或者控件之类的导出方法,而我所在维护的系统却用很简单的方法,如下,网上很少有讲如何设置要导出数据的EXcel格 ...
随机推荐
- 紫书 习题 11-8 UVa 1663 （最大流求二分图最大基数匹配）
很奇怪, 看到网上用的都是匈牙利算法求最大基数匹配 紫书上压根没讲这个算法, 而是用最大流求的. 难道是因为第一个人用匈牙利算法然后其他所有的博客都是看这个博客的吗? 很有可能-- 回归正题. 题目中 ...
- 【图灵杯 F】一道简单的递推题(矩阵快速幂,乘法模板)
Description 存在如下递推式: F(n+1)=A1*F(n)+A2*F(n-1)+-+An*F(1) F(n+2)=A1*F(n+1)+A2*F(n)+-+An*F(2) - 求第K项的值对 ...
- Android Studio打包.so文件教程
在eclipse里,.so文件eclipse会帮助我们自动打包进apk文件,通常是放在:libs/armeabi目录,然后把libxxx.so拷贝到这个目录下,这样NDK就会自动把这个libxxx.s ...
- HDU 4756 Install Air Conditioning（次小生成树）
题目大意:给你n个点然后让你求出去掉一条边之后所形成的最小生成树. 比較基础的次小生成树吧. ..先prime一遍求出最小生成树.在dfs求出次小生成树. Install Air Conditioni ...
- 软件project之软件设计
英雄是随着历史的时代产生的.软工也不例外.软件project这一门学科主要是为了解决当代软件危机而诞生的, 学习软件project的视频过后,最终让我揭开了它的神奇面纱,让我对软工设计有了一个初步的认 ...
- mysql---左连接、右连接、内连接之间的差别与联系
现有两张表 第一张表为男生表,记录了男生的姓名和配偶的编号 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlfbWFv/font/5a6L5L2T/fo ...
- js中如何取精度
js中如何取精度 一.总结 一句话总结:其实round()函数去经度会有误差,直接用num.toFixed(2)简单方便. toFixed()方法会按照指定的小数返回数值的字符串表示.var num ...
- Python 序列化处理
序列化 文件为dump 字符串为dumps dumps()方法返回一个str,内容就是标准的JSON loads()方法将其还原 在程序运行的过程中,所有的变量都是在内存 d = dict(name= ...
- django 笔记12 session
第一步写好函数,然后生成数据库session表 python manage.py makemigrations python manage.py migrate session原理: .Session ...
- MySQL服务启动：某些服务在未由其他服务或程序使用时将自动停止
这几天因为工作需求,需要把MySQL请出来,所以将尘封已久的MySQL进行启动.可是事与愿违,兴许是许久没有访问MySQL了,MySQL生气的不理我,并向外抛出一阵阵报错.1.其中一个是:Window ...