AngularJs導出數(shù)據(jù)到Excel的示例代碼

更新時間：2017年08月11日 15:49:26 作者：喝不醉再來

本篇文章主要介紹了AngularJs導出Excel的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

公司一個新的需求導出Exce表格，研究了一下，最后終于實現(xiàn)，分享給大家。

1 使用FileSaver

第一次采用FileSaver.js 由于剛開始導致導出一片空白，還只能抓取網(wǎng)頁里面的表格地址：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的好處就是可以在數(shù)據(jù)層面去組織結(jié)構(gòu)

官網(wǎng)地址:http://alasql.org/

js部分

\\ angular 需要導入xlsx.core.min.js alasql.min.js
\\ 文件結(jié)構(gòu) 
 var arr = [
      {
        '收入':1,
        '支出':2,
        '結(jié)存':3
      },
      {
        '收入':4,
        '支出':5,
        '結(jié)存':6
      }
    ]

\\ 生成 excel 文件
alasql('SELECT * INTO XLSX("日記賬.xlsx",{headers:true}) FROM ?',[arr]);

我優(yōu)化的版本

// 導出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),
        '結(jié)存':$filter('number')(item.balance,2)
      })
    })
    if(arr.length < 1){
      ToasterTool.error('暫無數(shù)據(jù)，導出失?。?);
    }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('數(shù)據(jù)導出成功！')
            })

          }
        })
    }
  }

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: