table合併單元格並轉excel下載
阿新 • • 發佈：2020-08-12
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="../lib/angular/angular.js"></script>
<style>
.table td,th{
text-align: center;
}
</style>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope) {
//模擬後臺返回的資料
$scope.data=[
{"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"hadoop1","taskId":58,"fileId":72},
{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"hadoop1","taskId":58,"fileId":73},
{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"hadoop1","taskId":58,"fileId":73},
{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"hadoop1","taskId":58,"fileId":73},
{"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"a","taskId":57,"fileId":71},
{"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"a","taskId":57,"fileId":71},
{"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"a","taskId":57,"fileId":71},
{"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"desktop1234ee3","taskId":59,"fileId":79},
{"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"desktop1234ee3","taskId":59,"fileId":79}
];
var list = [];
angular.forEach($scope.data,function (item) {
for(var i=0;i<list.length;i++){
if(list[i].taskName === item.taskName){
list[i].fileList.push(item);
return;
}
}
list.push({
taskName:item.taskName,
fileList:[item]
});
});
$scope.dataNew=list;
/**
*匯出Excel檔案
*/
var idTmr="";
$scope.getExplorer=function () {
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';
}
};
$scope.ToExcel=function() {
//匯出前做判斷，是否存在資料
if($scope.dataNew.length==0){
toaster.pop("warning", "無法匯出空內容！");
return;
}
//整個表格拷貝到EXCEL中
if ($scope.getExplorer() == 'ie') {
var curTbl = document.getElementById('eventInfoTable');
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();
// oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//結束excel程序，退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("$scope.Cleanup();", 1);
}
} else {
tableToExcel('table');
}
};
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><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))
}
})();
});
</script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>主機名稱</th>
<th>主機ip</th>
<th>起始時間</th>
<th>任務id</th>
<th>檔名稱</th>
</tr>
</thead>
<tbody ng-repeat="file in dataNew">
<tr ng-repeat="item in file.fileList">
<td ng-if="$index ==0" rowspan="{{file.fileList.length}}">{{file.taskName}}</td>
<td>{{item.fileName}}</td>
<td>{{item.startTime}}</td>
<td>{{item.taskId}}</td>
<td>{{item.fileId}}</td>
</tr>
</tbody>
</table>
<button class="btn-primary btn" ng-click="ToExcel()">下載excel</button>
</div>
</body>
</html>