首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:49:54
字体:
来源:转载
供稿:网友

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表