js前端导出excel,网上的例子很多,大部分都是使用如下代码:

//统计导出$scope.statisExport=function(){toOutPutExcel('statisTable', '证件发放');};//导出var idTmr;  function getExplorer() {  var explorer = window.navigator.userAgent ;  if(explorer.indexOf("MSIE")>=0){//iereturn '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){//Operareturn '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对象excelvar oWB = oXL.Workbooks.Add();// 获取workbook对象var xlsheet = oWB.Worksheets(1);// 激活当前sheetvar 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="#" οnclick="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

<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,设置标题和页脚,实现特殊表格需求相关推荐

vue基于Blob.js和Export2Excel.js做前端导出excel兼容ie
这里简单的说一下兼容ie的想法,至于vue怎么使用这两个文件做导出excel这里不加叙述,不会的请自动百度或评论私聊. 对于这个问题的产生,我有两种猜想供讨论,有兴趣的可以验证下是由于ie的版本产生 ...
js vue 设置excel单元格样式_vue项目使用xlsx-style实现前端导出Excel样式修改（添加标题，边框等），并且上传npm踩坑记录...
前段时间,我们项目提出一个前端导出Excel表格的需求, 这个很简单,利用xlsx,file-saver很容易实现(网上很多教程). 后来需要加入标题,标题居中显示,加入边框等等样式需求,这就给我很多 ...
纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行
前提是安装xlsx,已经可以导出普通的excel npm install --save xlsx file-saver 然后需要安装 npm install xlsx-style 如果运行的时候报错 ...
Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
xlsx模块前端_利用xlsx-syle前端导出excel且支持自定义样式
利用xlsx-syle前端导出excel且支持自定义样式前言本文的代码是基于react的. 本文仅用于记录我在前端导出excel遇到的问题的笔记整理. 需求描述需要前端来实现对数据的导出,导出成 ...
excel导出_学习笔记—— 前端导出excel
这两天工作上来了两个需求,一个是打印的功能,一个是导出的功能.功能其实之前已经做出来了,打印我用的是printjs的插件,excel用的是Export2Excel.js,但是产品要求打印页面和导出的e ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...

js 使用前端导出excel,设置标题和页脚,实现特殊表格需求