如何將Excel表格放在網頁上

更新於 發佈於 閱讀時間約 6 分鐘
大家是否有需要將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">
網頁上呈現效果如下:
上方是網頁標題,嵌入的PDF檔則有完整控制選項,可放大縮小、下載、列印。
我其實最喜歡這個呈現方式,使用者可以自行調整成習慣的閱讀方式,也可以直接下載或列印。但是同事看了覺得字很小(放大鍵表示:???)要求再改。
這時我腦中絕望的警鈴響起:看來只剩下照著Excel檔,重新用HTML編寫表格一條路了。不是辦不到,但用HTML寫表格本身就不是很直覺的作業,加上表格中多的是合併儲存格、不同背景色等狀況,怕麻煩的我當場就想下班了。

Excel檔轉成HTML

我的垂死掙扎是試圖將Excel表格直接轉成HTML碼。試了幾個線上轉換工具後才發現,其實最簡單的辦法是在Excel中另存新檔 > 存檔類型 > 網頁。要注意的是:
  1. 存檔類型要選「網頁」,不是「單一網頁檔案」。前者會輸出htm檔,後者是mht檔。
  2. 要先在編輯畫面選取要輸出的範圍,在另存成網頁檔時,選擇「選取區」再儲存(如下圖),輸出的網頁才會是只有選取範圍的畫面。如果選擇「整本活頁簿」,即使活頁簿僅有一個工作表,輸出的網頁下方也會出現該工作表的標題,這不是我們要的。
在Excel中另存新檔 > 存檔類型選網頁時,會出現下方的儲存選項。要選下面的!
輸出後,就會成功得到完整保留原本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都不支援的系統的話,希望這篇紀錄對你有幫助。
為什麼會看到廣告
avatar-img
8會員
4內容數
即使不是資訊專業,社畜還是能用小技巧增進效率(=偷懶)
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章介紹如何使用VBA程式碼將【包含備註】的Excel檔案轉換為PDF檔。在研究這個問題時,作者花了3個小時多的時間,但後來發現了一個更簡單的方法,這讓作者感到震驚和懷疑人生。最後,作者強調使用他人的智慧來提高自己的能力。文章提供了相關參考文獻和圖片。
在日常工作和學習中,PDF檔案是一種常見的文件格式。然而,許多使用者發現,要完全使用PDF的各種功能,如PDF旋轉、PDF刪除頁面、PDF加密、PDF解除加密、PDF浮水印和PDF轉txt,都需要購買升級版的軟體。
Thumbnail
本文介紹瞭如何將Excel圖表轉成圖片,並解決了圖表資料量大時可能出現的錯誤訊息。此外,還分享了ChatGPT 4o (訂閱付費版) 的幫助與成功轉換圖片的經驗。 還有周杰倫關於一技之長的觀點分享,激勵讀者找到自己的優勢和興趣。並提供了相關參考文獻,讓讀者進一步深入瞭解主題。
Thumbnail
本文介紹了將獨立的Excel檔案轉換為PDF檔的方法,並提供了相關連結和資源,包括Excel教學、VBA自動轉存檔案等。文章中還包含了南宋詞人辛棄疾詞和張忠謀的引言,讓讀者在解決問題的同時得到一些靈感和鼓勵。
Thumbnail
全新軟體PDFtoPDF.ai使用先進的PDF壓縮技術,將笨重的PDF圖像轉換為易於管理的可編輯文字,同時保持文件質量。使用PDFtoPDF.ai,專業人士和個人用戶能輕鬆管理大量文件,提高工作效率。
Thumbnail
設計完一覽表之後,如果會寫程式的人可以每天用這種方法去抓資料放到Excel. 那不會寫程式的人呢? 這裡教你一個稍微要花點時間的輸出Excel的方法。 在上禮拜完成的自選裡。   一、  你先依下圖,在“功能”中找到”輸出到Excel”,按下報價精靈 二、  選擇全部加入,按下全部加
Thumbnail
分頁是EXCEL很棒的一個功能,他可以將不同類型的資料在同一個檔案裏面分開存放,就不需要產出一拖拉庫的檔案。 但是隨著時間或是類型越來越多,分頁數量逐漸上升,分頁要尋找可能就不是一件非常容易的事情。 就要一直點...一直點...一直點.... 上面的範例只是52週的資料而已,有些公司的分頁
Thumbnail
在職場上,我們經常需要使用 Excel 表格來處理資料,而自動格式設定可以幫助我們快速將資料整理成一致的格式,讓資料看起來更清晰、更有效率。用 Excel 的快捷鍵自動出現自動格式設定技巧,可以讓我們在更短的時間內套用自動格式,讓工作更輕鬆。
Thumbnail
EXCEL很常用來輸入與紀錄與多資料,而標準的資料一定會帶有一個標題,但如果標題如果太長,常常會導致頁面過於寬鬆,使得無法一個版面涵蓋所有內容。 下圖為例,右邊其實還有一欄資料,但是標題太長導致有部分資料無法顯示於頁面中,這種狀況在列印時其實也會浪費紙張。 如果直接調整欄寬,則會
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章介紹如何使用VBA程式碼將【包含備註】的Excel檔案轉換為PDF檔。在研究這個問題時,作者花了3個小時多的時間,但後來發現了一個更簡單的方法,這讓作者感到震驚和懷疑人生。最後,作者強調使用他人的智慧來提高自己的能力。文章提供了相關參考文獻和圖片。
在日常工作和學習中,PDF檔案是一種常見的文件格式。然而,許多使用者發現,要完全使用PDF的各種功能,如PDF旋轉、PDF刪除頁面、PDF加密、PDF解除加密、PDF浮水印和PDF轉txt,都需要購買升級版的軟體。
Thumbnail
本文介紹瞭如何將Excel圖表轉成圖片,並解決了圖表資料量大時可能出現的錯誤訊息。此外,還分享了ChatGPT 4o (訂閱付費版) 的幫助與成功轉換圖片的經驗。 還有周杰倫關於一技之長的觀點分享,激勵讀者找到自己的優勢和興趣。並提供了相關參考文獻,讓讀者進一步深入瞭解主題。
Thumbnail
本文介紹了將獨立的Excel檔案轉換為PDF檔的方法,並提供了相關連結和資源,包括Excel教學、VBA自動轉存檔案等。文章中還包含了南宋詞人辛棄疾詞和張忠謀的引言,讓讀者在解決問題的同時得到一些靈感和鼓勵。
Thumbnail
全新軟體PDFtoPDF.ai使用先進的PDF壓縮技術,將笨重的PDF圖像轉換為易於管理的可編輯文字,同時保持文件質量。使用PDFtoPDF.ai,專業人士和個人用戶能輕鬆管理大量文件,提高工作效率。
Thumbnail
設計完一覽表之後,如果會寫程式的人可以每天用這種方法去抓資料放到Excel. 那不會寫程式的人呢? 這裡教你一個稍微要花點時間的輸出Excel的方法。 在上禮拜完成的自選裡。   一、  你先依下圖,在“功能”中找到”輸出到Excel”,按下報價精靈 二、  選擇全部加入,按下全部加
Thumbnail
分頁是EXCEL很棒的一個功能,他可以將不同類型的資料在同一個檔案裏面分開存放,就不需要產出一拖拉庫的檔案。 但是隨著時間或是類型越來越多,分頁數量逐漸上升,分頁要尋找可能就不是一件非常容易的事情。 就要一直點...一直點...一直點.... 上面的範例只是52週的資料而已,有些公司的分頁
Thumbnail
在職場上,我們經常需要使用 Excel 表格來處理資料,而自動格式設定可以幫助我們快速將資料整理成一致的格式,讓資料看起來更清晰、更有效率。用 Excel 的快捷鍵自動出現自動格式設定技巧,可以讓我們在更短的時間內套用自動格式,讓工作更輕鬆。
Thumbnail
EXCEL很常用來輸入與紀錄與多資料,而標準的資料一定會帶有一個標題,但如果標題如果太長,常常會導致頁面過於寬鬆,使得無法一個版面涵蓋所有內容。 下圖為例,右邊其實還有一欄資料,但是標題太長導致有部分資料無法顯示於頁面中,這種狀況在列印時其實也會浪費紙張。 如果直接調整欄寬,則會