【angularjs】pc端使用angular搭建项目，实现导出excel功能
2024-09-25 22:07:13
此为简单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>
作者：smile.轉角
QQ：493177502
最新文章
- Hibernate 学习笔记一
- IOS 线程处理 子线程
- UML 序列图一点理解
- 读取Config文件工具类 PropertiesConfig.java
- POJ 2481 Cows
- 菜鸟玩云计算之十六：Ubuntu14.04上创建的虚拟机迁移到RHEL6.4
- leetcode Generate Parentheses python
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
- Windows上安装配置SSH教程（3）——在Windows系统上安装与配置WinSCP
- 下拉菜单css
- 删除.svn 脱离svn版本控制器
- ECharts（中国地图）的使用 及 非空 tooltip formatter 验证
- python day08作业
- TensorFlow（1）：使用Docker镜像搭建TensorFlow环境
- （转）Unity3d中的碰撞检测
- P4303 [AHOI2006]基因匹配 未完成
- JSON与JAVA数据的转换-----从3,23到现在5.25才过去2个月，感觉时间过得那么漫长
- linux内核移植过程问题总结
- API Authentication Error: {"error":"invalid_client","message":"Client authentication failed"}
- 2018软工实践—Alpha冲刺(1)