本文共 5976 字，大约阅读时间需要 19 分钟。

之前都是用Java在后端做的导出，这次表格数据做的比较麻烦，就直接在前端把table导出了，非常方便。

博客文章链接:

html表格代码

   
    
    导出
   
   									
   
   									
   
   
						......																								
								    
     
企业反映问题诉求汇总表
    
								    
									
     
      										统计填报时间开始于:${pd.addStart }									
     									
     
      										统计填报时间结束于:${pd.addEnd }									
     								
    
								    
     
									      
序号
									      
属地
									      
填报企业数量
									      
反映问题企业数量
									      
企业问题数量
									      
人才用工
									      
金融服务
									      
财政税务
									      
能源要素
									      
环保安监
									      
科技创新
									      
公建配套
									      
审批服务
									      
疫情防控
									      
其他
									      
备注
								     
								     
										      
										      
合计
										      
${list.companyNum }
										      
${list.companyNum }
										      
${list.questionNum }
										      
${list.type0Num }
										      
${list.type1Num }
										      
${list.type2Num }
										      
${list.type3Num }
										      
${list.type4Num }
										      
${list.type5Num }
										      
${list.type6Num }
										      
${list.type7Num }
										      
${list.type8Num }
										      
${list.type9Num }
										      
									     
								     
									      
1
									      
市直
									      
${shizhiList.companyNum }
									      
${shizhiList.companyNum }
									      
${shizhiList.questionNum }
									      
${shizhiList.type0Num }
									      
${shizhiList.type1Num }
									      
${shizhiList.type2Num }
									      
${shizhiList.type3Num }
									      
${shizhiList.type4Num }
									      
${shizhiList.type5Num }
									      
${shizhiList.type6Num }
									      
${shizhiList.type7Num }
									      
${shizhiList.type8Num }
									      
${shizhiList.type9Num }
									      
								     
     
										      
1
										      
${name }
										      
${list.companyNum }
										      
${list.companyNum }
										      
${list.questionNum }
										      
${list.type0Num }
										      
${list.type1Num }
										      
${list.type2Num }
										      
${list.type3Num }
										      
${list.type4Num }
										      
${list.type5Num }
										      
${list.type6Num }
										      
${list.type7Num }
										      
${list.type8Num }
										      
${list.type9Num }
										      
									     
															    
   

JS代码

//导出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_USER\Software\Microsoft\Office\16.0\Excel\Security”选项，也可以在“查看”中勾选“地址栏”将路径复制到地址栏中。根据版本不同也可能是14.0（Office 2010）等等，根据情况而定。

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

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

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

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

再打开就不提示了...

今天再来看看为啥打开会有这样的提示

- 这是个假的excel文件只有xls格式可以在Excel中打开xlsx不行。

JS通过base64或者blob把一个包含一个<table>的<html>串导出成xx.xls格式。而Excel可以打开html文件。这样看起来就是一个成功的Excel导出。

- base64形式的文件描述在js或者html中就是一个很长的base4字符串

也就是说，这样导出的并不是一个真正的excel，是一个被重命名过的html或者txt文件而且可以被excel打开，但是会有上图的提示。

那就换一种导出试试。结果ok

js代码 需要引入<script type="text/javascript" src="static/js/xlsx.core.min.js"></script>

//导出excel        function toExcel(){        	             var blob = sheet2blob(XLSX.utils.table_to_sheet($('table')[0]));             //设置链接               var link = window.URL.createObjectURL(blob);                var a = document.createElement("a");    //创建a标签               a.download = "企业反映问题诉求汇总表.xlsx";                //设置被下载的超链接目标（文件名）               a.href = link;                            //设置a标签的链接               document.body.appendChild(a);            //a标签添加到页面               a.click();                                //设置a标签触发单击事件               document.body.removeChild(a);            //移除a标签        }             // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载     function sheet2blob(sheet, sheetName) {         sheetName = sheetName || 'sheet1';         var workbook = {             SheetNames: [sheetName],             Sheets: {}         };         workbook.Sheets[sheetName] = sheet;         // 生成excel的配置项         var wopts = {             bookType: 'xlsx', // 要生成的文件类型             bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性             type: 'binary'         };         var wbout = XLSX.write(workbook, wopts);         var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});         // 字符串转ArrayBuffer         function s2ab(s) {             var buf = new ArrayBuffer(s.length);             var view = new Uint8Array(buf);             for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;             return buf;         }         return blob;     }

转载地址：http://tmwxi.baihongyu.com/