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实现图片翻页效果
Dec 23 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
JSON 数据格式详解
Sep 13 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 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
global.php
2006/12/09 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python3.7 的新特性详解
2019/07/25 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
国贸专业的职业规划书
2014/03/15 职场文书
租车协议书范本
2014/04/22 职场文书
导师评语大全
2014/04/26 职场文书
品德评语大全
2014/05/05 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis