使用JS將table表格導出為excel

本文轉載自查看原文 2020-02-12 23:31 2608

之前都是用Java在后端做的導出，這次表格數據做的比較麻煩，就直接在前端把table導出了，非常方便。

博客文章鏈接:https://www.zjhuiwan.cn/info/20200212/4004242219096560.html

html表格代碼

<div style="vertical-align:top;padding-left:2px;">
    <a class="btn btn-sm btn-info tooltip" name="excelExport" id="excelExport" onclick="toExcel();" title="導出到excel"><i class="ace-icon fa fa-cloud-download  bigger-110"></i>導出</a>
</div>
<table id="table_report" class="table table-striped table-bordered table-hover" style="margin-top:22px;" border="1">
								<caption style="text-align: center;display:none"><h3>企業反映問題訴求匯總表</h3></caption>
								<caption style="text-align: left;">
									<c:if test="${(pd.addStart!=null&&pd.addStart!='')&&(pd.addEnd==null||pd.addEnd=='')}">
										統計填報時間開始於:${pd.addStart }
									</c:if>
									<c:if test="${(pd.addStart==null||pd.addStart=='')&&(pd.addEnd!=null&&pd.addEnd!='')}">
										統計填報時間結束於:${pd.addEnd }
									</c:if>
								</caption>
								<tr>
									<td >序號</td>
									<td>屬地</td>
									<td>填報企業數量</td>
									<td>反映問題企業數量</td>
									<td>企業問題數量</td>
									<td>人才用工</td>
									<td>金融服務</td>
									<td>財政稅務</td>
									<td>能源要素</td>
									<td>環保安監</td>
									<td>科技創新</td>
									<td>公建配套</td>
									<td>審批服務</td>
									<td>疫情防控</td>
									<td>其他</td>
									<td>備注</td>
								</tr>
								<c:if test="${(name=='admin1'||name=='麗水市' )&&areaTest==null}">
									<tr>
										<td></td>
										<td>合計</td>
										<td>${list.companyNum }</td>
										<td>${list.companyNum }</td>
										<td>${list.questionNum }</td>
										<td>${list.type0Num }</td>
										<td>${list.type1Num }</td>
										<td>${list.type2Num }</td>
										<td>${list.type3Num }</td>
										<td>${list.type4Num }</td>
										<td>${list.type5Num }</td>
										<td>${list.type6Num }</td>
										<td>${list.type7Num }</td>
										<td>${list.type8Num }</td>
										<td>${list.type9Num }</td>
										<td></td>
									</tr>
								<tr>
									<td>1</td>
									<td>市直</td>
									<td>${shizhiList.companyNum }</td>
									<td>${shizhiList.companyNum }</td>
									<td>${shizhiList.questionNum }</td>
									<td>${shizhiList.type0Num }</td>
									<td>${shizhiList.type1Num }</td>
									<td>${shizhiList.type2Num }</td>
									<td>${shizhiList.type3Num }</td>
									<td>${shizhiList.type4Num }</td>
									<td>${shizhiList.type5Num }</td>
									<td>${shizhiList.type6Num }</td>
									<td>${shizhiList.type7Num }</td>
									<td>${shizhiList.type8Num }</td>
									<td>${shizhiList.type9Num }</td>
									<td></td>
								</tr>
						......
								</c:if>
								
								<c:if test="${name!='admin1'&&name!='麗水市' }">
									<tr>
										<td>1</td>
										<td>${name }</td>
										<td>${list.companyNum }</td>
										<td>${list.companyNum }</td>
										<td>${list.questionNum }</td>
										<td>${list.type0Num }</td>
										<td>${list.type1Num }</td>
										<td>${list.type2Num }</td>
										<td>${list.type3Num }</td>
										<td>${list.type4Num }</td>
										<td>${list.type5Num }</td>
										<td>${list.type6Num }</td>
										<td>${list.type7Num }</td>
										<td>${list.type8Num }</td>
										<td>${list.type9Num }</td>
										<td></td>
									</tr>
								</c:if>
							</table>

JS代碼

方法1

//導出excel
 function toExcel(){
      //window.location.href='<%=basePath%>pmb/excelShowInfo.do';
      //獲取表格
      var exportFileContent = document.getElementById("table_report").outerHTML;                
      //設置格式為Excel，表格內容通過btoa轉化為base64，此方法只在文件較小時使用(小於1M)
      //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
      //var link = "data:"+MIMEType+";base64," + exportFileContent;
      //使用Blob
      var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});     	//解決中文亂碼問題
      blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
    //設置鏈接
      var link = window.URL.createObjectURL(blob); 
      var a = document.createElement("a");    //創建a標簽
      a.download = "企業反映問題訴求匯總表.xls";  //設置被下載的超鏈接目標（文件名）
      a.href = link;                            //設置a標簽的鏈接
      document.body.appendChild(a);            //a標簽添加到頁面
      a.click();                                //設置a標簽觸發單擊事件
      document.body.removeChild(a);            //移除a標簽
 }

簡單的table導出為excel就好了。