您好,欢迎访问一九零五行业门户网

angularjs如何导出Excel实例分享

本文主要和大家分享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); };
html加入导出按钮
<button class="btn btn-link" style="float:right" ng-click="exporttoexcel('#tableexcel')"> <span class="glyphicon glyphicon-share">导出excel</span> </button>
记得把要导出的table标签加上 id="tableexcel"
注意:
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; }
html中添加调用按钮
<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实例分享的详细内容。
其它类似信息

推荐信息