公司一个新的需求导出Exce表格，研究了一下，最后终于实现，分享给大家。
1 使用FileSaver
第一次采用FileSaver.js 由于刚开始导致导出一片空白，还只能抓取网页里面的表格地址：https://github.com/eligrey/FileSaver.js
HTML
<div id="exportable">
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>dsds@163.com</td>
</tr>
</tbody>
</table>
</div>
js部分
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "日记账.xls");
};
2 使用 alasql
使用alasql的好处就是可以在数据层面去组织结构
官网地址:http://alasql.org/
js部分
\\ angular 需要导入xlsx.core.min.js alasql.min.js
\\ 文件结构
var arr = [
{
'收入':1,
'支出':2,
'结存':3
},
{
'收入':4,
'支出':5,
'结存':6
}
]
\\ 生成 excel 文件
alasql('SELECT * INTO XLSX("日记账.xlsx",{headers:true}) FROM "htmlcode">
// 导出excel
$scope.exportToExcel=function(){
var data = angular.copy($scope.pageData.list)
var arr = [];
var type = null;
var amountIN = 0;
var amountOUT = 0;
angular.forEach(data,function (item) {
// 兑付情况
if(item.isHappened){
type = '未兑付'
}else{
type = '已兑付'
}
// 收入
if(item.itemModel=='INCOME'){
amountIN = item.amount
}
// 支出
if(item.itemModel=='OUTCOME'){
amountOUT = item.amount
}
arr.push({
'兑付情况':type,
'合同':item.keyId,
'收付日期':$filter('date')(item.updateTime,'yyyy-MM-dd'),
'科目':item.itemType.value,
'收入':$filter('number')(amountIN,2),
'支出':$filter('number')(amountOUT,2),
'结存':$filter('number')(item.balance,2)
})
})
if(arr.length < 1){
ToasterTool.error('暂无数据，导出失败！');
}else{
// alasql('SELECT * INTO XLSX("日记账.xlsx",{headers:true}) FROM "日记账-'+ DateTool.format(new Date(),'yyyy-MM-dd HH:mm:ss') + "-"+ $scope.loginUser.userName +'.xlsx",{headers:true}) FROM ?',[arr])
.then(function (data) {
if(data == 1){
$timeout(function(){
ToasterTool.success('数据导出成功！')
})
}
})
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“AngularJs导出数据到Excel的示例代码”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。