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格 ...
随机推荐
- Docker学习总结(12)——非常详细的 Docker 学习笔记
一.Docker 简介 Docker 两个主要部件: Docker: 开源的容器虚拟化平台 Docker Hub: 用于分享.管理 Docker 容器的 Docker SaaS 平台 -- Docke ...
- MarkDown写作之嵌入LaTeX和HTML
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/49788741 Markdown 是一种 ...
- 洛谷—— P2904 [USACO08MAR]跨河River Crossing
https://www.luogu.org/problem/show?pid=2904 题目描述 Farmer John is herding his N cows (1 <= N <= ...
- cocos2dx2.0 与cocos2dx3.1 创建线程不同方式总结
尽管内容是抄过来的.可是经过了我的验证.并且放在一起就清楚非常多了,cocos2dx版本号常常变化非常大.总会导致这样那样的问题. cocos2dx2.0 中 1. 头文件 #include < ...
- input range 模拟滑块
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- litepal更好的操作sqlite3,配置与基本操作
litepal更好的操作sqlite3 配置 在app下的build.gradle中加入 创建litepal.xml配置 在app/src/main下面创建assets,新建litepal.xml & ...
- 英语影视台词---四、Sideways
英语影视台词---四.Sideways 一.总结 一句话总结:杯酒人生 Sideways,大致意思是“偏离.倾斜.转向…”.很明显中文译名与英文原名并没有什么关联,<杯酒人生>这个名字,其 ...
- thinkphp5项目--个人博客(三)
thinkphp5项目--个人博客(三) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...
- zzulioj--1841--so easy!麻麻再也不用担心我的数学了!(数学水题)
1841: so easy!麻麻再也不用担心我的数学了! Time Limit: 1 Sec Memory Limit: 128 MB Submit: 27 Solved: 15 SubmitSt ...
- 为Activity生成桌面快捷方式
有时候如果想让我们的应用在桌面上创建多个快捷方式,我们可以在Manifest.xml文件中对相应的activity进行声明. <application android:icon="@d ...