AngularJs导出数据到Excel的示例代码


Posted in Javascript onAugust 11, 2017

公司一个新的需求导出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('数据导出成功!')
            })

          }
        })
    }
  }

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

Javascript 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
Vue 表单控件绑定的实现示例
Aug 11 #Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 #Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 #Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
JSON对象转化为字符串详解
Aug 11 #Javascript
JS中Swiper的使用和轮播图效果
Aug 11 #Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 #Javascript
You might like
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
php实现aes加密类分享
2014/02/16 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
vuex实现简易计数器
2016/10/27 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python列表解析操作实例总结
2020/02/26 Python
韩语专业本科生求职信
2013/10/01 职场文书
联谊活动策划书
2014/01/26 职场文书
优秀部门获奖感言
2014/02/14 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
小学生思想品德评语
2014/12/31 职场文书
服务员岗位职责
2015/02/03 职场文书
2014年终个人总结报告
2015/03/09 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript