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 编程引入命名空间的方法
Jun 29 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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 防恶意刷新实现代码
2010/05/16 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
vue实现tab栏点击高亮效果
2020/08/19 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Tensorflow 实现释放内存
2020/02/03 Python
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
学雷锋宣传标语
2014/06/25 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
企业计划生育责任书
2015/05/09 职场文书
校车司机安全责任书
2015/05/11 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers