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('数据导出成功!')
            })

          }
        })
    }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Angular2+国际化方案(ngx-translate)的示例代码

    Angular2+国际化方案(ngx-translate)的示例代码

    本篇文章主要介绍了Angular2+国际化方案(ngx-translate)的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • Angularjs实现上传图片预览功能

    Angularjs实现上传图片预览功能

    本文通过实例代码给大家介绍了Angularjs实现上传图片预览功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • angular中子控制器向父控制器传值的实例

    angular中子控制器向父控制器传值的实例

    今天小编就为大家分享一篇angular中子控制器向父控制器传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular.js实现注册系统的实例详解

    Angular.js实现注册系统的实例详解

    Angular.js是Google开发的前端技术框架,最近一直在学习Angular.js,通过对angular.js的简单理解后发现,angular.js通过一些简单的指令即可实现对DOM元素的操作,其特色为双向数据绑定,下面这篇文章给大家详细介绍Angular.js实现注册系统的方法,一起来看看吧。
    2016-12-12
  • AngularJS 过滤器的简单实例

    AngularJS 过滤器的简单实例

    本文主要介绍AngularJS 过滤器,这里提供详细了AngularJS 过滤器详细资料,并提供简单实例,有需要的朋友可以参考下
    2016-07-07
  • AngularJS控制器详解及示例代码

    AngularJS控制器详解及示例代码

    本文主要介绍AngularJS控制器,这里整理了控制器的相关资料和提供示例代码及实例效果图,有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS实现tab选项卡的方法详解

    AngularJS实现tab选项卡的方法详解

    这篇文章主要介绍了AngularJS实现tab选项卡的方法,结合实例形式较为详细的分析了AngularJS实现tab选项卡的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2017-07-07
  • 浅谈angularjs $http提交数据探索

    浅谈angularjs $http提交数据探索

    这篇文章主要介绍了浅谈angularjs $http提交数据探索,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • angular2 NgModel模块的具体使用方法

    angular2 NgModel模块的具体使用方法

    这篇文章主要介绍了angular2 NgModel模块的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • AngularJs入门教程之环境搭建+创建应用示例

    AngularJs入门教程之环境搭建+创建应用示例

    这篇文章主要介绍了AngularJs入门教程之环境搭建+创建应用的方法,较为详细的分析了AngularJS的功能、下载及应用创建方法,需要的朋友可以参考下
    2016-11-11

最新评论