Question:
Excel可以直接開啟HTML裡的Table Tag，
所以想要將網頁裡的某個Table直接輸出成Excel的檔案。
所以想要將網頁裡的某個Table直接輸出成Excel的檔案。
Solve:
程式如下～
HTML：
<a id="dlink" style="display:none;"></a>
//需要一個隱藏的超連結，id="dlink"
<input type="button" value="下載"
onclick="tableToExcel('myTableId', 'myTableId', 'myExcelFile.xls')" />
//給使用者按的下載按鈕，點擊後呼叫tableToExcel
//傳入參數為(要匯出的Table的Id, 定義一個名字, 匯出後的Excel檔名)
<table id="myTableId">...</table>
//要匯出的Table，記得定id
Javascript：
function tableToExcel(table, name, filename) {
var uri = 'data:application/vnd.ms-excel;base64,';
//定義格式及編碼方式
var 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>';
//Excel的基本框架
if (!table.nodeType)
table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
//將超連結指向Excel內容
document.getElementById("dlink").download = filename;
//定義超連結下載的檔名
document.getElementById("dlink").click();
//執行點擊超連結的動作來下載檔案
}
function base64(s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
//將文字編譯成Base64格式
function format(s, c) {
return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; })
}
//將文字裡的{worksheet}和{table}替換成相對應文字
//把Table內容塞進Excel框架內
這樣點擊下載按鈕後就可以直接把Table轉成Excel檔案並下載囉！
提醒一下～
這方式是用Excel硬開HTML的檔案而已，所以並不是真正的Excel檔，
開啟時Excel會出現提醒訊息，不過基本的操作應該是沒問題的，
檔案實際使用的狀況還是要看使用者而定囉！
p.s.
IE因為不能用Data URI scheme所以這個方式可能不適用，非IE瀏覽器則可正常執行！
一定要IE可使用的話可能還是要想Server Side的程式來作業。
HTML：
<a id="dlink" style="display:none;"></a>
//需要一個隱藏的超連結，id="dlink"
<input type="button" value="下載"
onclick="tableToExcel('myTableId', 'myTableId', 'myExcelFile.xls')" />
//給使用者按的下載按鈕，點擊後呼叫tableToExcel
//傳入參數為(要匯出的Table的Id, 定義一個名字, 匯出後的Excel檔名)
<table id="myTableId">...</table>
//要匯出的Table，記得定id
Javascript：
function tableToExcel(table, name, filename) {
var uri = 'data:application/vnd.ms-excel;base64,';
//定義格式及編碼方式
var 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>';
//Excel的基本框架
if (!table.nodeType)
table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
//將超連結指向Excel內容
document.getElementById("dlink").download = filename;
//定義超連結下載的檔名
document.getElementById("dlink").click();
//執行點擊超連結的動作來下載檔案
}
function base64(s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
//將文字編譯成Base64格式
function format(s, c) {
return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; })
}
//將文字裡的{worksheet}和{table}替換成相對應文字
//把Table內容塞進Excel框架內
這樣點擊下載按鈕後就可以直接把Table轉成Excel檔案並下載囉！
提醒一下～
這方式是用Excel硬開HTML的檔案而已，所以並不是真正的Excel檔，
開啟時Excel會出現提醒訊息，不過基本的操作應該是沒問題的，
檔案實際使用的狀況還是要看使用者而定囉！
p.s.
IE因為不能用Data URI scheme所以這個方式可能不適用，非IE瀏覽器則可正常執行！
一定要IE可使用的話可能還是要想Server Side的程式來作業。
網誌管理員已經移除這則留言。
回覆刪除