如何將Excel表格放在網頁上
大家是否有需要將Excel表格放在網頁上的需求呢？雖然對於我這種高中時網際網路才開始普及的七年級生來說，第一個想法是用HTML畫表格（然後當場崩潰），但其實，直接在Excel中選取要呈現的表格，再貼到HTML編輯器就可以了。雖然如此，在實務工作上，這麼簡單的操作卻碰到不可思議的障礙，於是把我的經驗和解決方法分享給大家。
首先，你可能會問，網頁就該有網頁的呈現方式，為什麼要把Excel表格原封不動地放到網頁上呢？我任職的單位有大型會議需求，需要將會議日程以表格方式呈現，單用文字不是不行，只是難以呈現同時段在不同會議室召開平行會議等狀況。
Excel表格轉成圖片
最簡單的做法，是將表格轉成圖片，然後直接貼到網頁上，但缺點是無法搜尋內文。考量到與會者也許會想要直接搜尋人名或標題，圖片實在不適合。但轉成圖片的方法也意外簡單：在Excel中選取要轉成圖片的儲存格，再貼到小畫家存檔即可，可存成jpg、png等常見圖片格式，相當方便，不需要fancy的影像處理軟體。
Excel表格轉成PDF檔並嵌入網頁
另一個做法是將Excel檔轉成PDF檔，再嵌到網頁中。好處是既可以搜尋內文，PDF畫面也能按使用者需求放大縮小，更可以直接下載。轉成PDF檔時，使用Excel 檔案 匯出 建立Adobe PDF，在跳出對話框中設定需匯出的工作表、以及轉換選項即可（建議選擇「符合紙張寬度」，內容才會佔滿畫面，否則不是超出邊界、就是留下白邊）。
嵌入網頁時，則可使用HTML embed語法（「sample.pdf」需換成實際檔案路徑及檔名）：
<embed src="sample.pdf" type="application/pdf" width="100%" height="600px"> 網頁上呈現效果如下：
我其實最喜歡這個呈現方式，使用者可以自行調整成習慣的閱讀方式，也可以直接下載或列印。但是同事看了覺得字很小（放大鍵表示：？？？）要求再改。
這時我腦中絕望的警鈴響起：看來只剩下照著Excel檔，重新用HTML編寫表格一條路了。不是辦不到，但用HTML寫表格本身就不是很直覺的作業，加上表格中多的是合併儲存格、不同背景色等狀況，怕麻煩的我當場就想下班了。
Excel檔轉成HTML
我的垂死掙扎是試圖將Excel表格直接轉成HTML碼。試了幾個線上轉換工具後才發現，其實最簡單的辦法是在Excel中另存新檔 存檔類型 網頁。要注意的是：
- 存檔類型要選「網頁」，不是「單一網頁檔案」。前者會輸出htm檔，後者是mht檔。
- 要先在編輯畫面選取要輸出的範圍，在另存成網頁檔時，選擇「選取區」再儲存（如下圖），輸出的網頁才會是只有選取範圍的畫面。如果選擇「整本活頁簿」，即使活頁簿僅有一個工作表，輸出的網頁下方也會出現該工作表的標題，這不是我們要的。
輸出後，就會成功得到完整保留原本Excel格式及排版的網頁檔案。下班！
等等。
把這個網頁內容複製貼到網站後台後，字體變大、可以搜尋文字、也可以列印的網頁獲得同事一致好評。
但是。用手機開啟網頁時，卻發現表格畫面超出螢幕邊界，而且無法移動、也無法縮小。
無法使用橫向捲軸
原來我任職單位的網站後台，有鎖住橫向捲軸的設定。這其實是現代網頁設計的趨勢，為了避免造成排版亂掉、使用者體驗不良，只容許縱向捲軸，其實是好的設計。問題是我們的表格內容就是那麼多，如果轉成圖片，配合畫面縮小了，內容根本看不到，內嵌PDF檔被否決，放Excel轉成的網頁又超出邊界，而且完全沒辦法看到溢出的部分。
解決方法是用overflow-x:auto讓表格出現橫向捲軸，或將儲存格寬度設定成配合頁面寬度縮放。前者的話，很遺憾地，網站後台不支援CSS，更沒辦法直接把鎖住橫向捲軸的設定關掉。後者的話，要不就是進去Excel輸出的網頁原始碼中慢慢改，要不自己重畫表格。但就算我願意用HTML慢慢畫表格，也加入reponsive的設定，因為內容文字過多（範例中的Title 1, 2, 3，都是動輒兩三行的演講標題），在手機上呈現的也很可能是每一欄都拉成長條的表格，完全不適合閱讀。
使用iframe嵌入網頁
講半天，其實我就是不想重畫表格而已。為了避免無意義的勞動，我突然想起二十年前自己架網站時使用過的iframe。如果可以用內嵌另一個網頁的方式繞過主網站的設定...？iframe是個古老技術了，現在常被認為是過時、妨礙網站流量的做法[1]。但為了繞過限制重重的網站後台，只好硬著頭皮嘗試。
先將Excel輸出的網頁檔上傳到後台（或其他雲端），得到網址或後台內的路徑後，再於需呈現表格的網頁原始碼中輸入以下語法（「test.htm」需取代為完整網址或路徑）：
<iframe height="3000" src="test.htm" style="border:none;" title="Agenda" width="100%"></iframe> 用以上語法，即可在網頁上嵌入另一個網頁，俄羅斯娃娃的概念。由於沒有設邊框（style="border:none"），網頁使用者不會發現看的其實是兩個網頁。重點是：成功繞過了網站後台鎖住橫向捲軸的限制！在較小的螢幕上，被擋住的內容可以用滑動的方式看到。
以上，是非前端專業行政人員面對一個看似簡單、實則因為網站後台系統限制而困難重重，再盡量考慮使用者便利性後的問題解決流程。雖然不是最佳解（過程中無數次想自己架站算了的me），但對於一般非專業網管、需要在系統內快速找到解方的人來說，已經是盡全力的解法啦。
自架網站、或使用較為現代化的網站建置系統的話，應該都不會碰到這些問題。但如果跟我一樣，受制於工作單位使用的是較為老舊、連CSS都不支援的系統的話，希望這篇紀錄對你有幫助。
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.