使用JS将table表格导出为excel

之前都是用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就好了。

​​

`有几个问题需要注意

1、导出的excel没有边框，如下图。解决办法：table 需要加border="1"；

 ​

2、表名加粗可以加个<h2></h2>

 

3、需要导出但是页面不需要显示的可以table中加display:none

4、导出的excel打开会提示不安全，如下图：

 ​

这个还未解决..明天看看咋搞。应该是js导出格式的问题，强行成了excel。亲测后端用Java导不会有此问题的，

不过要excel不提示此种类型错误（一般客户下载文件可不愿意改），可以：

1键盘同时按下“Ctrl+R”，打开“运行”，输入“regedit”打开“注册表编辑器”

2找到“HKEY_CURRENT_USERSoftwareMicrosoftOffice16.0ExcelSecurity”选项，也可以在“查看”中勾选“地址栏”将路径复制到地址栏中。根据版本不同也可能是14.0（Office 2010）等等，根据情况而定。

3在空白右键单击并且新建，选择“DWORD(32-位)值(D)”。此时列表下会出现一个”新值#1“的项。

4选中”新值#1“右键单击，选择“重命名”，将名字改为“ExtensionHardening”，注意区分大小写。

 5选中刚刚修改的“ExtensionHardening”，右键单击“修改”。

6将数值改为0，并且保持默认的是十六进制不变，然后点击确定完成设置。

再打开就不提示了...