公司一個新的需求導出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('數據導出成功!')            })          }        })    }  }以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答