本文主要跟大家分享angularjs如何匯出Excel實例,希望能幫助大家。
angularjs 1.x導出Excel方法,常用的有2種
1. 直接匯出table為xls
service中加入
homeServiceMoudule.factory('Excel',['$window', '$sce','ConfigService', '$localStorage',function($window, $sce, ConfigService,$localStorage){ var uri='data:application/vnd.ms-excel;base64,'; var template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head> <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet> <x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/> </x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook> </xml><![endif]--></head><body><table>{table}</table></body></html>'; var base64=function(s){return window.btoa(window.unescape(encodeURIComponent(s)));}; var format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];});}; return { tableToExcel:function(tableId,worksheetName){ var table=window.$(tableId), ctx={worksheet:worksheetName,table:table.html()}, href=uri+base64(format(template,ctx)); return href; } }; }]);
data:application/vnd.ms-excel
相容於舊版,導出的為2003的xls。
如果改成:
data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
匯出為2007的xlsx.
在controller中引入'Excel'
##然後寫呼叫$scope.exportToExcel=function(tableId){ var exportHref=Excel.tableToExcel(tableId, 'worksheetName'); $timeout(function(){location.href=exportHref;},500); };
<button class="btn btn-link" style="float:right" ng-click="exportToExcel('#tableExcel')"> <span class="glyphicon glyphicon-share">导出Excel</span> </button>
##注意:
1.匯出檔名隨機,匯出數字格式需要注意,可能被excel日期化,
2.在chrome瀏覽器中,我遇到了資料行數的bug,1600行沒問題,多了就匯出出錯,頁面會跳到空白頁,在Firefox正常。
2. 直接匯出資料
需要引進2個工具:
在頁面中引入xlsx.core.min.js 和alasql.js
用例:直接把資料匯出的2007的xslx
controller中編寫邏輯呼叫
//导出为excel $scope.exportToExcel=function( ){ // ex: '#my-table' var excelArrs = getExcelData(); alasql.promise('SELECT * INTO XLSX("fileName' + '.xlsx",{headers:true}) FROM ?',[excelArrs]) .then(function (data) { if(data == 1){ $timeout(function(){ console.log('数据导出成功!'); }) } }); }; //组装ecxel数据 function getExcelData() { var var arr =[]; var columns = 30; angular.forEach(dateList, function(data, index, datas) { var newObj = { column1:data.column1, column2:data.column2 }; var column = 0; if(data.hasOwnProperty('minList')) { var minList = data.minList; if(minList != null && minList.length > 0){ angular.forEach(minList, function(dataM, indexM, datasM) { if(dataM){ if(dataM.value){ column++; newObj["value"+indexM] = dataM.value; if(dataM.predict) newObj["date"+indexM] = dataM.date; } } }); } } for(;column < columns ; column++){ newObj["value"+column] = ""; newObj["date"+column] = ""; } arr.push(newObj); }); return arr; }
<button class="btn btn-link" ng-click="exportToExcel()"> <span class="glyphicon glyphicon-share">导出Excel</span> </button>
注意
1. 匯出資料數組的第一個元素的屬性決定檔頭,如果第一個只有2個屬性,後面的陣列元素就算有再多的屬性值也不會被導出。所有需要把第一個元素寫滿屬性。
2. 可命名匯出檔名,但不能命名表名。
相關推薦:
五種JS匯出Excel的方法#php匯出Excel裡HTML內容檔案類別方法php使用原生的方法匯出excel實例分享以上是angularjs如何匯出Excel實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!