iT邦幫忙

0

[js] html table 匯出 excel 並下載

  • 分享至 

  • xImage

我想要請問一下 如何把.html上的 table 轉存成excel並下載?

看更多先前的討論...收起先前的討論...
不能 MARK + Ctrl + C => EXCEL 點某個儲存格 然後 Ctrl + V 貼上嗎
網頁的 表格有以下作法
1. TABLE 正規表格
2. CSS 區塊堆疊

這兩種是很常見的作法
第一種,已經快消失了
第二種已經是非常非常多人使用
所以一般我都是建議複製到文字檔後
再用EXCEL 的文字檔匯入的方式,這樣會比較保險
我是想要把網站上 的table 供使用者下載成excel
蟹老闆 iT邦大師 1 級 ‧ 2015-08-31 21:07:42 檢舉
excel 有新增WEB檔詢應該可以用
蟹老闆 iT邦大師 1 級 ‧ 2015-08-31 21:08:13 檢舉
dream提到:
檔詢

查詢
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
外獅佬
iT邦大師 1 級 ‧ 2015-09-01 09:15:34
最佳解答

javascript:

<pre class="c" name="code">
function exportExcel(){
  var html = '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8" /><title>Excel</title>';
  html += '';
  html += document.getElementById('div_excel').outerHTML + '';
  window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}

HTML:

<pre class="c" name="code">



  <div id="div_excel">
    <table>
      <thead>
	<tr><th>產品編號</th><th>產品名稱</th></tr>
      </thead>
      <tbody>
	<tr><td>P00001</td><td>Windows 10</td></tr>
	<tr><td>P00002</td><td>Windows 8.1</td></tr>
      </tbody>
    </table>
  </div>
  <br />
  <div><button type="button" onclick="exportExcel()">匯出Excel</button></div>
看更多先前的回應...收起先前的回應...
外獅佬 iT邦大師 1 級 ‧ 2015-09-01 09:20:13 檢舉

outerHTML

這個....打錯了Orz
請改成innerHTML謝謝

外獅佬 iT邦大師 1 級 ‧ 2015-09-01 09:22:06 檢舉

<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8" />

有中文等等utf-8編碼的字元,這個設定請務必要放上去,否則會變成亂碼

外獅佬 iT邦大師 1 級 ‧ 2015-09-01 09:24:09 檢舉

最後....這段程式碼,對於Windows 10的Edge瀏覽器無效Orz

wiselou提到:
Edge瀏覽器

這個很爛,很多都不能跑,開了三次,就把預設改回 CHROME 了

外獅佬 iT邦大師 1 級 ‧ 2015-09-01 09:45:59 檢舉

哈哈~不是的,是因為IE、Edge都不支援『data:...』這種uri格式落寞

外獅佬 經使用可以順利下載Excel,但開啟時會出現"檔案格式與檔名不符。此檔案可能已損毀或不安全。"的錯誤...

6
player
iT邦大師 1 級 ‧ 2015-08-31 15:07:21

不行耶~~ @_@ 出現Failed to load resource: the server responded with a status of 404 (Not Found)

把你的語法弄上來吧,我自己弄可以喔
不是很難套用的套件
他基本上要載入 JQUERY 然後 表格宣告
按下 按鈕 JS 就會把表格轉成 XLS 了

我要發表回答

立即登入回答