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. 可命名導出文件名，但是不能命名表名。
相關推薦：