AngularJs 中將表格匯出生成Excel表
阿新 • • 發佈:2019-01-06
工程結構如下圖:
直接貼程式碼:
1,views: usageTracking.html
<div class="wisdomPark-ui-form list"
data-ng-controller=" usageTrackingController as usageTrackingCtrl">
<section class="wisdomPark-ui-wrap">
<div class="wisdomPark-ui-wrap-header">
<span>查詢條件</span>
<div class="col-xs-3 fr">
<button data-ng-click="usageTrackingCtrl.ToExcel('ta')"
class="wisdomPark-ui-btn wisdomPark-ui-btn-red">匯出</button>
</div>
</div>
<div class="collapse in">
<div class ="wisdomPark-ui-wrap-body">
<div class="row">
<div class="col-xs-12">
<table id="ta" width="852" border="0" >
</table>
</div>
</div>
</div >
</div>
</section>
</div>
2, services:usageTrackingService.js
/**
* sampleService
*/
(function() {
'use strict';
angular.module('app.usagetracking').service('usageTrackingService', usageTrackingService);
usageTrackingService.$inject = [ '$filter', '$q', 'httpService' ];
function usageTrackingService($filter, $q, httpService) {
this.getAllDataCount = getAllDataCount;
this.ToExcel = ToExcel;
/**
* 查詢 全平臺業務資料總數
*/
function getAllDataCount(param) {
return httpService.http({
domain : "saas-usage-tracking",
url : "innodb/getAllDataCount",
method : "POST",
data : null,
successCallback : function(msg) {
// 如有需要在此操作
}
});
}
/**
*匯出Excel檔案
*/
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}
function ToExcel(tableid) {
//整個表格拷貝到EXCEL中
if (getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
//建立AX物件excel
var oWB = oXL.Workbooks.Add();
//獲取workbook物件
var xlsheet = oWB.Worksheets(1);
//啟用當前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的內容移到TextRange中
sel.select;
//全選TextRange中內容
sel.execCommand("Copy");
//複製TextRange中內容
xlsheet.Paste();
//貼上到活動的EXCEL中
oXL.Visible = true;
//設定excel可見屬性
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
"Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//結束excel程序,退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
tableToExcel('ta');
}
//return 1;
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,', template = '<html><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', base64 = function(
s) {
return window.btoa(unescape(encodeURIComponent(s)))
}, format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
return function(table, name) {
if (!table.nodeType)
table = document.getElementById(table)
var ctx = {
worksheet : name || 'Worksheet',
table : table.innerHTML
}
window.location.href = uri + base64(format(template, ctx))
}
})();
//end of "匯出Excel檔案 "
}
})();
3,controllers:usageTrackingControllerLists.js
(function() {
'use strict';
angular.module('app.usagetracking').controller('usageTrackingController',
usageTrackingController);
usageTrackingController.$inject = [ '$scope', '$timeout', '$state',
'$stateParams', 'usageTrackingService', 'httpService',
'listgridService', 'notificationService', 'i18nService' ];
function usageTrackingController($scope, $timeout, $state, $stateParams,
usageTrackingService, httpService, listgridService,
notificationService, i18nService) {
var vm = this;
activate();
function activate() {
vm.dataList = [];
i18nService.setCurrentLang('zh-cn');
vm.searchParam = {
page : 1,
pageSize : 10,
sortParamList : []
};
vm.allDataCount = 0;
httpService.processHttp(
usageTrackingService.getAllDataCount,
null,
function(data){
vm.allDataCount = data;
}
);
/**
* 資料匯出成Excel
*/
vm.ToExcel = function(tableId) {
setTimeout(function() {
usageTrackingService.ToExcel(tableId);
}, 1000);
}
}
}
})();