AngularJs导出数据到Excel的示例代码
更新时间:2017年08月11日 15:49:26 作者:喝不醉再来
本篇文章主要介绍了AngularJs导出Excel的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
公司一个新的需求导出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 ?',[arr]);
我优化的版本
// 导出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 ?',[arr]); alasql.promise('SELECT * INTO XLSX("日记账-'+ 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('数据导出成功!') }) } }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
div实现自适应高度的textarea实现angular双向绑定
本文主要介绍了div实现自适应高度的textarea,实现angular双向绑定的方法。具有一定的参考价值,下面跟着小编一起来看下吧2017-01-01对Angular.js Controller如何进行单元测试
这篇文章主要给大家介绍了如何对Angular Controller进行单页测试。如果你不太了解angular也没关系,本文也会提及关于Angular的一些知识。文中通过示例代码介绍的很详细,详细对大家的理解和学习很有帮助,下面来一起看看吧。2016-10-10
最新评论