使用JS将table表格导出为excel

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

html表格代码


x
1
<div style="vertical-align:top;padding-left:2px;">
2
    <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>
3
</div>
4
<table id="table_report" class="table table-striped table-bordered table-hover" style="margin-top:22px;" border="1">
5
                                <caption style="text-align: center;display:none"><h3>企业反映问题诉求汇总表</h3></caption>
6
                                <caption style="text-align: left;">
7
                                    <c:if test="${(pd.addStart!=null&&pd.addStart!='')&&(pd.addEnd==null||pd.addEnd=='')}">
8
                                        统计填报时间开始于:${pd.addStart }
9
                                    </c:if>
10
                                    <c:if test="${(pd.addStart==null||pd.addStart=='')&&(pd.addEnd!=null&&pd.addEnd!='')}">
11
                                        统计填报时间结束于:${pd.addEnd }
12
                                    </c:if>
13
                                    <c:if test="${(pd.addStart==null||pd.addStart=='')&&(pd.addEnd==null||pd.addEnd=='')}">
14
                                        统计截止填报时间:${now }
15
                                    </c:if>
16
                                </caption>
17
                                <tr>
18
                                    <td >序号</td>
19
                                    <td>属地</td>
20
                                    <td>填报企业数量</td>
21
                                    <td>反映问题企业数量</td>
22
                                    <td>企业问题数量</td>
23
                                    <td>人才用工</td>
24
                                    <td>金融服务</td>
25
                                    <td>财政税务</td>
26
                                    <td>能源要素</td>
27
                                    <td>环保安监</td>
28
                                    <td>科技创新</td>
29
                                    <td>公建配套</td>
30
                                    <td>审批服务</td>
31
                                    <td>疫情防控</td>
32
                                    <td>其他</td>
33
                                    <td>备注</td>
34
                                </tr>
35
                                <c:if test="${(name=='admin1'||name=='丽水市' )&&areaTest==null}">
36
                                    <tr>
37
                                        <td></td>
38
                                        <td>合计</td>
39
                                        <td>${list.companyNum }</td>
40
                                        <td>${list.companyNum }</td>
41
                                        <td>${list.questionNum }</td>
42
                                        <td>${list.type0Num }</td>
43
                                        <td>${list.type1Num }</td>
44
                                        <td>${list.type2Num }</td>
45
                                        <td>${list.type3Num }</td>
46
                                        <td>${list.type4Num }</td>
47
                                        <td>${list.type5Num }</td>
48
                                        <td>${list.type6Num }</td>
49
                                        <td>${list.type7Num }</td>
50
                                        <td>${list.type8Num }</td>
51
                                        <td>${list.type9Num }</td>
52
                                        <td></td>
53
                                    </tr>
54
                                <tr>
55
                                    <td>1</td>
56
                                    <td>市直</td>
57
                                    <td>${shizhiList.companyNum }</td>
58
                                    <td>${shizhiList.companyNum }</td>
59
                                    <td>${shizhiList.questionNum }</td>
60
                                    <td>${shizhiList.type0Num }</td>
61
                                    <td>${shizhiList.type1Num }</td>
62
                                    <td>${shizhiList.type2Num }</td>
63
                                    <td>${shizhiList.type3Num }</td>
64
                                    <td>${shizhiList.type4Num }</td>
65
                                    <td>${shizhiList.type5Num }</td>
66
                                    <td>${shizhiList.type6Num }</td>
67
                                    <td>${shizhiList.type7Num }</td>
68
                                    <td>${shizhiList.type8Num }</td>
69
                                    <td>${shizhiList.type9Num }</td>
70
                                    <td></td>
71
                                </tr>
72
                                <tr>
73
                                    <td>2</td>
74
                                    <td>开发区</td>
75
                                    <td>${kaifaList.companyNum }</td>
76
                                    <td>${kaifaList.companyNum }</td>
77
                                    <td>${kaifaList.questionNum }</td>
78
                                    <td>${kaifaList.type0Num }</td>
79
80
                                    <td>${kaifaList.type8Num }</td>
81
                                    <td>${kaifaList.type9Num }</td>
82
                                    <td></td>
83
                                </tr>
84
85
                                <tr>
86
                                    <td>5</td>
87
                                    <td>青田县</td>
88
                                    <td>${qingtianList.companyNum }</td>
89
                                    <td>${qingtianList.companyNum }</td>
90
                                    <td>${qingtianList.questionNum }</td>
91
                                    <td>${qingtianList.type0Num }</td>
92
93
                                    <td>${qingtianList.type9Num }</td>
94
                                    <td></td>
95
                                </tr>
96
                                <tr>
97
                                    <td>6</td>
98
                                    <td>云和县</td>
99
                                    <td>${yunheList.companyNum }</td>
100
                                    <td>${yunheList.companyNum }</td>
101
                                    <td>${yunheList.questionNum }</td>
102
103
                                    <td>${yunheList.type8Num }</td>
104
                                    <td>${yunheList.type9Num }</td>
105
                                    <td></td>
106
                                </tr>
107
                                <tr>
108
                                    <td>7</td>
109
                                    <td>庆元县</td>
110
                                    <td>${qingyuanList.companyNum }</td>
111
                                    <td>${qingyuanList.companyNum }</td>
112
                                    <td>${qingyuanList.questionNum }</td>
113
                                    <td>${qingyuanList.type0Num }</td>
114
                                    <td>${qingyuanList.type1Num }</td>
115
116
                                    <td>${qingyuanList.type9Num }</td>
117
                                    <td></td>
118
                                </tr>
119
                                <tr>
120
                                    <td>8</td>
121
                                    <td>缙云县</td>
122
                                    <td>${jinyunList.companyNum }</td>
123
                                    <td>${jinyunList.companyNum }</td>
124
125
                                    <td></td>
126
                                </tr>
127
                                </c:if>
128
                                
129
                                <c:if test="${name!='admin1'&&name!='丽水市' }">
130
                                    <tr>
131
                                        <td>1</td>
132
                                        <td>${name }</td>
133
                                        <td>${list.companyNum }</td>
134
    
135
                                        <td></td>
136
                                    </tr>
137
                                </c:if>
138
                            </table>

JS代码

方法1


xxxxxxxxxx
20
1
 //导出excel
2
 function toExcel(){
3
      //window.location.href='<%=basePath%>pmb/excelShowInfo.do';
4
      //获取表格
5
      var exportFileContent = document.getElementById("table_report").outerHTML;                
6
      //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
7
      //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
8
      //var link = "data:"+MIMEType+";base64," + exportFileContent;
9
      //使用Blob
10
      var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});         //解决中文乱码问题
11
      blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
12
    //设置链接
13
      var link = window.URL.createObjectURL(blob); 
14
      var a = document.createElement("a");    //创建a标签
15
      a.download = "企业反映问题诉求汇总表.xls";  //设置被下载的超链接目标（文件名）
16
      a.href = link;                            //设置a标签的链接
17
      document.body.appendChild(a);            //a标签添加到页面
18
      a.click();                                //设置a标签触发单击事件
19
      document.body.removeChild(a);            //移除a标签
20
 }

简单的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字符串
- blob形式的文件描述在js或者html中是一个URL形式的字符串他指向的是浏览器内存中的一个文件片段形如"blob:http://sheetjs.com/f999f57f-b79f-4293-a317-3bbf6ea58788"

也就是说，这样导出的并不是一个真正的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;
     }

这样就ok了，js-xlsx2是GitHub上开源的一个项目，用法参考https://www.cnblogs.com/liuxianan/p/js-excel.html

前端要学的也挺多的... 有空可以研究下人家咋做的... 现在先用着

使用JS将table表格导出为excel

相关文章

推荐阅读

留言评论