您的位置：首页 > Web前端 > AngularJS

【angularjs】pc端使用angular搭建项目，实现导出excel功能

2018-03-06 11:07 856 查看

此为简单demo。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>导出excel</title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('MyCtrl',function($timeout,$scope){
// 表格数据
$scope.items = [
{
"Name": "ANC101",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia", "apple"]
},
{
"Name": "ABC102",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia", "iPhone"]
}
];
// 导出excel
$scope.exportData = function () {
var bFlag = 0;
angular.forEach($scope.items,function(value,index){
console.log(index);
if(value.selected){
bFlag = 1;
}
});
if(bFlag){
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
}

};

});

</script>
</head>
<body>
<div ng-controller="MyCtrl">
<button ng-click="exportData()" >Export</button>
<br />
<table width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="item.selected" /></td>
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
</tr>
</tbody>
</table>
<div id="exportable" style="display:none">
<table width="100%" >
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items|filter:{selected: true}">
<td align="center">{{item.Name}}</td>
<td align="center">{{item.Date}}</td>
<td align="center"><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

View Code

作者：smile.轉角

QQ：493177502

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航