使用JS将table表格导出为excel

2020-02-12 本文已影响0人明月天

之前都是用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>

image.gif

JS代码

方法1

<pre>x //导出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标签 }
</pre>

简单的table导出为excel就好了。