js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
来源:互联网 发布:网络会计若干问题探讨 编辑:程序博客网 时间:2024/05/22 01:53
js前端导出excel,网上的例子很多,大部分都是使用如下代码:
//统计导出$scope.statisExport=function(){toOutPutExcel('statisTable', '证件发放');};//导出var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; if(explorer.indexOf("MSIE")>=0){ //ie return 'ie'; }else if (explorer.indexOf("Firefox")>=0){ //firefox return 'Firefox'; }else if(explorer.indexOf("Chrome")>=0){ //Chrome return 'Chrome'; }else if(explorer.indexOf("Opera")>=0){ //Opera return 'Opera'; }else if(explorer.indexOf("Safari")>=0){ //Safari return 'Safari'; }; }; //设置导出的excel的标题 var excelTitle ="表格数据"; function toOutPutExcel(tableid, title) {// 整个表格拷贝到EXCEL中 excelTitle =title; if (getExplorer() == 'ie') { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); // 创建AX对象excel var oWB = oXL.Workbooks.Add(); // 获取workbook对象 var xlsheet = oWB.Worksheets(1); // 激活当前sheet var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); // 把表格中的内容移到TextRange中 sel.select; // 全选TextRange中内容 sel.execCommand("Copy"); // 复制TextRange中内容 xlsheet.Paste(); // 粘贴到活动的EXCEL中 oXL.Visible = true; // 设置excel可见属性 try { var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch (e) { print("Nested catch caught " + e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); // xls.visible = false; oXL.Quit(); oXL = null; // 结束excel进程,退出完成 // window.setInterval("Cleanup();",1); idTmr = window.setInterval("Cleanup();", 1); } }else{ tableToExcel(tableid); }; }; function Cleanup() { window.clearInterval(idTmr); CollectGarbage(); }; var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,', template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', base64 = function( s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType)// table = document.getElementById(table) table = $("#"+table).clone(); table = table[0]; $(table).find(".ng-hide").remove(); var ctx = { worksheet : excelTitle || 'Worksheet', table : table.innerHTML } //window.location.href = uri + '77u/'+base64(format(template, ctx)) var titleDate= new Date().Format("yyyy-MM-dd hh-mm-ss"); document.getElementById("dlink").href = uri + '77u/'+base64(format(template, ctx)); document.getElementById("dlink").download = excelTitle+titleDate+".xls"; document.getElementById("dlink").click(); } })();界面上是这样的:
<div id="imp_text" class="padtop20"><div class="infoInners" id="statisTable"><div id="tableHeads"><div class="tablescrollw"><table class="headStyle"><caption hidden><p style="font-size: x-large;font-family: '黑体';">我是表格标题</caption><thead><tr><th><p>序号</p></th><th ng-repeat="s in listDatasView"><p>{{s.name}}</p></th></tr></thead></table></div></div><div class="table_list"><div class="auditlist_inner" style="height: 500px;"><a id="dlink" style="display:none"></a><table class="baselist" id="tableExps"><tbody id="auditlist_tbody"><!-- s.retireInforId,s.name,s.visitTime,s.fee,s.comment --><tr ng-repeat="s in resultList"><td><p ng-bind="$index+1"></p></td><td><p style="cursor:pointer;text-decoration: underline;color: #067E7D;" title="{{s.name}}" ng-bind="s.name" ng-click="indivPrev(s)"></p></td><td><p ng-bind="s.number"></p></td><td><p ng-bind="s.receiptor | receiptor"></p></td><td><p ng-bind="s.branch"></p></td><td><p ng-bind="s.identification" style="mso-number-format:'@'"></p></td><td><p ng-bind="s.sex == 'f'?'女':'男'"></p></td><td><p ng-bind="s.politicalStatus | zm"></p></td><td><p ng-bind="s.phone"></p></td><td><p ng-bind="s.isBankCard ==true ?'已发放':'未发放'"></p></td><td><p ng-bind="s.isMedical ==true ?'已发放':'未发放'"></p></td><td><p ng-bind="s.isCommander ==true ?'已发放':'未发放'"></p></td><td><p ng-bind="s.isTag ==true ?'已发放':'未发放'"></p></td><td ng-repeat="t in s.newRetireInforItemList"><p>{{t.value==true?'已发放':'未发放'}}</p></td></tr></tbody><tfoot hidden> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td><p style="font-size: medium;color:red">测试数据</td> <td><p style="font-size: medium;color:red">真的是页脚</td> </tr></tfoot></table></div></div></div></div>
以前总觉得只能导出表格的数据,不能定制excel多余的内容,比如增加一个标题,或者在表格下面增加一些注释和文字,后面同事告诉我,添加的文字,你可以隐藏,导出的时候是会导出到Excel上面的:
1.设置标题:你可以使用caption标签
2.设置页脚可以使用tfoot标签
注意这两个需要增加hidden属性,以便于界面不显示,导出到excel会显示. 这样可以实现自由定制标题和页脚的文字,实现更复杂的需求,使用td来调格式.如下截图:
有问题可以交流,欢迎探讨
//********************************************************分割线**************************************************
如果要实现导出的excel添加边框的话,可以采用如下的样式:
<table cellspacing="0" cellpadding="0" class="baselist" id="statisTableOne" style="width:100%;border-collapse: collapse;border-width:0px; border-style:hidden;" border="1" > <!-- <caption hidden><p style="font-size: medium;">测试表</caption> --><tfoot hidden > <tr style="border:none"> <td style="border:none"> </td> <td colspan="6" style="border:none"><p style="font-size: medium;margin-left:auto; margin-right:auto;"> 上海市军队离休退休干部杨浦江湾服务管理中心 </td> </tr> <tr style="border:none"> <td style="border:none"> </td> <td colspan="6" style="border:none"><p style="font-size: medium;margin-left:auto; margin-right:auto;"> 军休干部住院医疗补助明细表(进2017年7月工资卡) </td> </tr> <tr style="border:none"></tr> <tr style="border:none"> <td style="border:none">部门: </td> <td style="border:none"> </td> <td style="border:none"> </td> <td style="border:none">日期: </td> <td style="border:none"> </td> <td style="border:none"> </td> <td style="border:none">单位:元 </td> <td style="border:none"> </td> <td style="border:none"> </td> <td style="border:none"> </td> </tr> <tr style="border:none"></tr></tfoot><thead><tr><th><p>序号</p></th><th><p>档案编号</p></th><th><p>姓名</p></th><th><p>测试</p></th><th><p>测试</p></th><th><p>测试</p></th><th><p>金)</p></th><th><p>张数</p></th><th><p>票号</p></th><th><p>备注</p></th></tr></thead><tbody> <tr ng-repeat="s in resultListOne"><td><p ng-bind="($index+1)==resultListOne.length?'合计':($index+1)"></p></td><td><p ng-bind="s.number"></p></td><td><p ng-bind="s.name"></p></td><td><p ng-bind="s.retriementType | retType"></p></td><td><p ng-bind="s.days"></p></td><td><p ng-bind="s.level"></p></td><td><p ng-bind="s.money"></p></td><td><p ng-bind="s.documents"></p></td><td><p ng-bind="s.bill"></p></td><td><p ng-bind="s.hosp_comment|cardType"></p></td></tr></tbody><tfoot hidden> <tr style="border:none"></tr> <tr style="border:none"> <td colspan="6" style="border:none"><p>备注: 1、、诊)。 </td> </tr> <tr style="border:none"> <td colspan="6" style="border:none"><p> 2、诊) </td> </tr> <tr style="border:none"> <td style="border:none">单位领导: </td> <td style="border:none"> </td> <td style="border:none"> </td> <td style="border:none">审核: </td> <td style="border:none"> </td> <td style="border:none"> </td> <td style="border:none">制单: </td> <td style="border:none"> </td> <td style="border:none"> </td> <td style="border:none"> </td> </tr></tfoot></table>
效果如下:
****************************************************分割线,2017年9月13日10:24:30**************************
上述的方法有一个缺陷,就是无法导出css样式,或者class样式,如果要定义很复杂的样式导出,是不行的,试了一下table2excel这个js也不行,最后找到了:ExcellentExport.js,可以将界面的css样式导出到excel上,用法很简单:先下载ExcellentExport.js,然后界面上提供一个按钮点击就可以下载:
<a download="测试的表格.xls" href="#" onclick="return ExcellentExport.excel(this, 'statisTableOne', 'Sheet1');" style="color: #fff; font-size: 12px;">导出</a>statisTableOne为table的id,这样就可以将样式导出,截图如下:
想要excel默认的边框样式,可以给th添加:<th style=" border:0.1px solid #333;"><p>序号</p></th>
如下的例子:https://www.thjiang.com/2016/05/19/JavaScript%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6%E2%80%94%E2%80%94ExcellentExport/
JavaScript导出Excel文件——ExcellentExport
Node.js 模块中有很多都支持将数据导出生成 Excel 文件,比如 node-xlsx
、excel-export
等,不过大多要么配置复杂要么功能较弱。
这里推荐一个工具:ExcellentExport,不需要任何JavaScript基础,只要3步简单配置即可极方便的一键将网页上的表格导出为 Excel。
具体配置
1. 给 HTML 中的表格加上一个 ID
12345678910
<table id="datatable"><tr><th>我是一只小表格</th><th>咿呀咿呀呦</th></tr><tr><td>我是一颗小小的石头</td><td>深深的埋在泥土之中 </td></tr></table>
2. 引入 excellentexport.js文件
1
<script src="excellentexport.js"></script>
excellentexport.js
文件地址: ExcellentExport.min.js
3. 加入
1
<a download="我是被导出的表格.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export table to Excel</a>
- js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
- 前端JS实现导出EXCEL表格
- js前端导出excel表格
- js 导出excel,设置下载的标题
- js 导出excel,设置下载的标题
- 前端js实现打印excel表格
- js实现html表格导出到excel
- js实现html表格导出到excel
- js实现html表格导出到excel
- JS导出excel表格
- JS导出excel表格
- js导出excel表格
- js导出excel表格
- 前端:页面表格导出Excel
- js前端导出Excel
- js实现导出excel(可以导出表格线)
- 文章标题js将网页表格导出为excel表格(兼容各种浏览器)
- 用js导出Excel表格
- Java基础知识第四篇-线程
- 读《暗时间》笔记
- MySQL数据导入异常问题
- H5-localStorage数据存储总结
- 【session】java.lang.IllegalStateException: getAttribute: Session already invalidated
- js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
- 欢迎使用CSDN-markdown编辑器
- 设置Firefox(火狐)浏览器的中文菜单/界面
- fatal: initialization error: could not initialize application. the application has not been initiali
- Java基础知识-IO流
- spring:<context:property-placeholder location="classpath:application.properties" />
- javaEE(web开发)私人学习笔记
- yeoman的使用
- INSTALL_FAILED_USER_RESTRICTED错误