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 相关文章推荐
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
vue获取form表单的值示例
Oct 29 Javascript
详解Node.JS模块 process
Aug 31 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
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP输出时间差函数代码
2013/01/28 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
JSON Web Tokens的实现原理
2017/04/02 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python使用OpenCV进行标定
2018/05/08 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
wxPython实现整点报时
2019/11/18 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript