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