有時碰到有些資料表(Data Grid)因為Server Side運算時間很久或資料量大
便不希望再次由Server端回傳Excel
而既然瀏覽器端上已經有運算結果的資料，就可直接用來產生Excel檔案，因此找了一個適用於IE及Chrome的處理方法，紀錄一下。
其概念在非IE的瀏覽器上，透過HTML的<a>將檔案回傳，類似以下的結構
<a download="fileName.xls" href="data:application/vnd.ms-excel;base64,(base64編碼)"></a>
其中只是將資料表以Html Table的字串方式透過base64編碼。
而在IE的瀏覽器上則是透過ActiveXObject直接開啟Excel並直接使用Script產出結果，還滿有意思的~可以試試看!(雖然又被IE玩了一次....)
便不希望再次由Server端回傳Excel
而既然瀏覽器端上已經有運算結果的資料，就可直接用來產生Excel檔案，因此找了一個適用於IE及Chrome的處理方法，紀錄一下。
其概念在非IE的瀏覽器上，透過HTML的<a>將檔案回傳，類似以下的結構
<a download="fileName.xls" href="data:application/vnd.ms-excel;base64,(base64編碼)"></a>
其中只是將資料表以Html Table的字串方式透過base64編碼。
而在IE的瀏覽器上則是透過ActiveXObject直接開啟Excel並直接使用Script產出結果，還滿有意思的~可以試試看!(雖然又被IE玩了一次....)
function
exportExcel(){
// Html Table資料
var table = "<table>" +
"<tr><th>Name</th><th>Age</th><th>Score</th></tr>" +
"<tr><td>Scott</td><td>13</td><td>90</td>" +
"<tr><td>Tiger</td><td>14</td><td>70</td></tr>" +
"</table>";
var table = "<table>" +
"<tr><th>Name</th><th>Age</th><th>Score</th></tr>" +
"<tr><td>Scott</td><td>13</td><td>90</td>" +
"<tr><td>Tiger</td><td>14</td><td>70</td></tr>" +
"</table>";
// IE11後的ActiveXObject判斷方式不同...
var isIE = window['ActiveXObject'] || "ActiveXObject" in window ?
var isIE = window['ActiveXObject'] || "ActiveXObject" in window ?
true : false;
if (!isIE) {
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><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"><!--[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];
})
};
var ctx = {worksheet: 'Worksheet', table: table.innerHTML};
var a = document.createElement('a');
a.href= uri + base64(format(template, ctx));
a.download=reportMaster.reportName+".xls";
a.click();
} else {
var i, j, str,
rowCount = table.rows.length,
if (!isIE) {
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><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"><!--[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];
})
};
var ctx = {worksheet: 'Worksheet', table: table.innerHTML};
var a = document.createElement('a');
a.href= uri + base64(format(template, ctx));
a.download=reportMaster.reportName+".xls";
a.click();
} else {
var i, j, str,
rowCount = table.rows.length,
// Activates Excel
excel = new ActiveXObject('Excel.Application');
excel = new ActiveXObject('Excel.Application');
// Opens a new Workbook
excel.Workbooks.Add();
excel.Workbooks.Add();
// Shows Excel on the screen
excel.Application.Visible = true;
for (i = 0; i < rowCount; i++) {
for (j = 0; j < table.rows[i].cells.length; j++) {
str = table.rows[i].cells[j].innerText;
if(str!==null&&str!=='undefined'){
excel.Application.Visible = true;
for (i = 0; i < rowCount; i++) {
for (j = 0; j < table.rows[i].cells.length; j++) {
str = table.rows[i].cells[j].innerText;
if(str!==null&&str!=='undefined'){
// Writes to the sheet
excel.ActiveSheet.Cells(i + 1, j + 1).Value = str;
excel.ActiveSheet.Cells(i + 1, j + 1).Value = str;
}
}
}
}
}
.png)
.png)
.png)
.png)
.png)
即可啟動Tomcat。
.png)
即可停止Tomcat
