公司一個新的需求導(dǎo)出Exce表格,研究了一下,最后終于實現(xiàn),分享給大家。
成都創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的疊彩網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
1 使用FileSaver
第一次采用FileSaver.js 由于剛開始導(dǎo)致導(dǎo)出一片空白,還只能抓取網(wǎng)頁里面的表格地址:https://github.com/eligrey/FileSaver.js
HTML
Name 小明 dsds@163.com
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 需要導(dǎo)入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)化的版本
// 導(dǎo)出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ù),導(dǎo)出失??!'); }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ù)導(dǎo)出成功!') }) } }) } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。