angularjs如何导出Excel实例

时间：2020-02-18 14:59:59 阅读：60 评论：0 收藏：0 [点我收藏+]

angularjs 1.x导出Excel方法，常用的有2种

1. 直接导出table为xls

service中加入

 1 homeServiceMoudule.factory(‘Excel‘,[‘$window‘, ‘$sce‘,‘ConfigService‘, ‘$localStorage‘,function($window, $sce, ConfigService,$localStorage){
 2 
 3     var uri=‘data:application/vnd.ms-excel;base64,‘;
 4 
 5     var template=‘<html xmlns:o="urn:schemas-microsoft-com:office:office"
 6 
 7     xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head>
 8 
 9     <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
10 
11     <x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>
12 
13     </x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>
14 
15     </xml><![endif]--></head><body><table>{table}</table></body></html>‘;
16 
17     var base64=function(s){return window.btoa(window.unescape(encodeURIComponent(s)));};
18 
19     var format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];});};
20 
21     return {
22 
23         tableToExcel:function(tableId,worksheetName){
24 
25             var table=window.$(tableId),
26 
27                 ctx={worksheet:worksheetName,table:table.html()},
28 
29                 href=uri+base64(format(template,ctx));
30 
31             return href;
32 
33         }
34 
35     };
36 
37 }]);

1 data:application/vnd.ms-excel

兼容旧版，导出的为2003的xls。

如果改成：

1 data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

导出为2007的xlsx.

在controller中引入‘Excel‘

然后编写调用

1 $scope.exportToExcel=function(tableId){
2 
3       var exportHref=Excel.tableToExcel(tableId,  ‘worksheetName‘);
4 
5           $timeout(function(){location.href=exportHref;},500);
6 
7 };

html加入导出按钮

1 <button class="btn btn-link" style="float:right" ng-click="exportToExcel(‘#tableExcel‘)">
2     <span class="glyphicon glyphicon-share">导出Excel</span> 
3 </button>

记得把要导出的table标签加上 id="tableExcel"html加入导出按钮

注意：

1.导出文件名随机，导出数字格式需要注意，可能被excel日期化，

2.在chrome浏览器中，我遇到了数据行数的bug，1600行没问题，多了就导出出错，页面会跳转到空白页，在Firefox正常。

2. 直接导出数据

需要引入2个工具：

https://github.com/SheetJS/sheetjs

https://github.com/agershun/alasql

在页面中引入xlsx.core.min.js 和alasql.js

用例：直接把数据导出的2007的xslx

controller中编写逻辑调用

 1 //导出为excel
 2 $scope.exportToExcel=function( ){ // ex: ‘#my-table‘
 3     var excelArrs = getExcelData();
 4      alasql.promise(‘SELECT * INTO XLSX("fileName‘ + ‘.xlsx",{headers:true}) FROM ?‘,[excelArrs])
 5         .then(function (data) {
 6           if(data == 1){
 7             $timeout(function(){
 8               console.log(‘数据导出成功！‘);
 9             })
10           }
11         });
12 };
13 
14 //组装ecxel数据
15 function getExcelData() {
16     var var arr =[];
17     var columns = 30;
18     angular.forEach(dateList, function(data, index, datas) {
19         var newObj = {
20             column1:data.column1,
21             column2:data.column2
22         };
23         var column = 0;
24         if(data.hasOwnProperty(‘minList‘)) {
25             var minList = data.minList; 
26             if(minList != null && minList.length > 0){
27                 angular.forEach(minList, function(dataM, indexM, datasM) {
28                     if(dataM){
29                         if(dataM.value){
30                             column++;
31                             newObj["value"+indexM] = dataM.value;
32                             if(dataM.predict)
33                                 newObj["date"+indexM] = dataM.date;
34                         }
35                     }
36                 });
37             }
38         }
39         for(;column < columns ; column++){
40             newObj["value"+column] =    "";
41             newObj["date"+column] = "";
42         }
43         arr.push(newObj);
44     });
45     return arr;
46 }

html中添加调用按钮

1 <button class="btn btn-link"  ng-click="exportToExcel()">
2     <span class="glyphicon glyphicon-share">导出Excel</span> 
3 </button>

注意

1. 导出数据数组的第一个元素的属性决定文件头，如果第一个只有2个属性，后面的数组元素就算有再多的属性值也不会被导出。所有需要把第一个元素写满属性。

2. 可命名导出文件名，但是不能命名表名。