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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
Vue.js基础知识小结
Jan 13 Javascript
Vue实现购物车功能
Apr 27 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
Python中的函数作用域
2018/05/07 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
异步传递消息系统的作用
2016/05/01 面试题
一道Delphi面试题
2016/10/28 面试题
如何写你的创业计划书
2014/01/07 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
考博导师推荐信范文
2015/03/27 职场文书
聘任书格式及范文
2015/09/21 职场文书
Django 如何实现文件上传下载
2021/04/08 Python