[Javascript] 將網頁內表格匯出成Excel檔案

Question:

Excel可以直接開啟HTML裡的Table Tag，
所以想要將網頁裡的某個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>'
+ ''
+ '</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的程式來作業。

參考資料：http://stackoverflow.com/questions/17126453/html-table-to-excel-javascript

[Javascript] 將網頁內表格匯出成Excel檔案

Next

較新的文章

Previous

較舊的文章

1 意見: