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

公司一个新的需求导出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>[e-mail]</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的好处就是可以在数据层面去组织结构

官网地址:

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('数据导出成功！')
            })

          }
        })
    }
  }

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