关于通过angularJs将页面中的html table 导出生成excel

最新推荐文章于 2025-01-02 21:02:35 发布

转载最新推荐文章于 2025-01-02 21:02:35 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gzhlt/p/5274702.html

本文介绍了一种使用AngularJS框架实现Excel导出的方法。通过自定义factory，利用HTML5特性导出表格数据到Excel文件。文章提供了具体实现代码及如何在Controller中调用此功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

<button class="btn btn-link" ng-click="exportToExcel('#table1')">
    <span class="glyphicon glyphicon-share"></span> 导出运单
</button>

table1为将要导出的table的Id。


自定义导出factory：

appModule.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
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>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
        }
    };
})

在table对应的controller里面添加方法：（调用之前要引用factory，$timeout）

//导出excel
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
    $scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
    $timeout(function(){location.href=$scope.exportHref;},100); // trigger download

}