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

最新推荐文章于 2024-04-18 14:03:10 发布

置顶清澈@Cherry

最新推荐文章于 2024-04-18 14:03:10 发布

阅读量1.4w

点赞数 5

分类专栏： JavaWeb 文章标签： js 前端导出 excel

本文链接：https://blog.csdn.net/nihaoqiulinhe/article/details/77942713

版权

JavaWeb 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

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="#" ο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

     
     
      
      <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>

清澈@Cherry

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
4
评论
js 使用前端导出excel,设置标题和页脚,实现特殊表格需求

js前端导出excel,网上的例子很多,大部分都是使用如下代码://统计导出 $scope.statisExport=function(){ toOutPutExcel('statisTable', '证件发放'); }; //导出 var idTmr; function getExplorer() { var explorer = window.n
复制链接

扫一扫