將網頁儲存為單一的HTML檔案：SingleFile / Save the Webpage as a Single HTML File: SingleFile
用瀏覽器的「另存網頁為...」功能所儲存的HTML檔案其實並不完整，還是需要連線取用網路資源。如果要將網頁裡面使用的圖片、樣式、字型全部儲存成可離線閱讀的HTML檔案，請使用SingleFile擴充功能。
The HTML files saved using the browser's "Save Page As..." function are not complete and still require an internet connection to access web resources. To save all the images, styles, and fonts used in a webpage into an HTML file that can be read offline, please use the SingleFile extension.
SingleFile
https://chromewebstore.google.com/detail/mpiodijhokgodhhofbcjdecpffjipkle
SingleFile是由Gildas製作的網頁瀏覽器擴充功能。它的主要目的是將使用者現在瀏覽的網頁保存為單一的HTML檔案。它的核心功能是將一個完整的網頁，包括所有的資料如文字、圖像和JavaScript程式碼，全部都儲存於一個HTML檔案中。這樣的設計便於檔案的儲存和分享，並且方便於離線查看。
SingleFile擴充功能支持多種瀏覽器，包括Google Chrome、Mozilla Firefox和Microsoft Edge等。它不僅能夠完整儲存網頁的內容，而且能夠讓使用者自行選擇網頁內要儲存的部分，或是為網頁加上註記後再來儲存。
你可以透過以下連接找到各個瀏覽器裡SingleFile擴充功能的安裝網址：
- Google Chrome: https://chromewebstore.google.com/detail/mpiodijhokgodhhofbcjdecpffjipkle
- Firefox: https://addons.mozilla.org/zh-TW/firefox/addon/single-file/
- Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/singlefile/efnbkdcfmcmnhlkaijjjmhjjgladedno
使用SingleFile將網頁儲存成HTML檔案 / Use SingleFile to save a webpage as an HTML file
接下來就讓我們看看要怎麼使用SingleFile。以下我在Kubuntu 22.04作業系統中，使用Google Chrome 116.0.5845.96跟SingleFile 1.22.40來做示範。
請開啟你要下載的網頁，例如「如何使用Docker APP？」。接著進行以下操作：
- 在網頁上按滑鼠右鍵。
- 進入SingleFile選單。
- 使用「Save page with SingleFile」。
此時網頁會變暗，左下角會出現SingleFile的處理過程。
稍待片刻便能儲存檔案了。
比較SingleFile跟另存網頁 / Comparing SingleFile with "Save Page As"
如果只是將網頁儲存成HTML檔案的話，一般情況是很難感受到SingleFile的好處。讓我們把SingleFile儲存的HTML檔案跟瀏覽器內建的「另存網頁」功能來做個比較看看。從上圖可以看到，SingleFile儲存的檔案有5.9MB，但下面用「另存網頁」保存的HTML檔案只有224.6KB。這是因為SingleFile會保存網頁裡面用到的圖片、樣式與程式等資源，但「另存網頁」只會保存連接。結果就造成兩者大小差距非常大。
如果你嘗試用文字編輯器打開SingleFile下載的HTML檔案，你會發現裡面有很多Base64編碼的內容。這是SingleFile將原本外連的圖片轉換成Base64後，跟HTML網頁儲存在一起的結果。這樣等同於將下載圖片檔案、並將圖片跟HTML檔案一起保存。關於Base64的介紹，可以看看我以前寫的「將圖片編碼成字串：MIME與Base64編碼」。
如果把這兩個HTML檔案都用瀏覽器開啟的話，一時間你可能很難看得出兩者的差別。左邊是SingleFile儲存的HTML檔案，右邊是Save page as儲存的檔案。
但如果我們將網路設定為離線 (可以用擴充功能Offline Mode來達到此效果)，兩者的差別就非常明顯了。左邊以SingleFile下載的檔案依然保留了圖片，但右邊用「另存網頁」下載檔案已經因為離線的緣故而無法顯示圖片。
保存成HTML檔案之後，網頁本身的大多特性仍然可以完整保留。舉例來說，RWD的網頁設計會在不同的螢幕大小下有不同的顯示方式，即使儲存成HTML檔案來離線使用，我們依然可以看到此設計。
限制 / Limitation
雖然我們可以用SingleFile盡可能將網頁本身保存為單一的HTML檔案，但由於網頁的樣式千奇百怪，SingleFile還是有其侷限。當網頁有太多JavaScript程式碼或是需要動態載入其他資料來源的設計時，SingleFile大多只能保存當下的畫面，但無法使用網頁本身的實際功能。也就是說，SingleFile適合用於將網頁保存為供人閱讀的靜態文件使用。
進階功能 / Advanced features
SingleFile不僅僅只是保存整個網頁，你也可以選擇只保存選取的內容，也可以將所有開啟的頁籤都保存下來，甚至是自動定期儲存網頁的畫面。
你可以用SingleFile的註解功能來為網頁加上便利貼筆記或是標亮。即使是儲存成HTML檔案之後，便利貼筆記還是能夠隨意拖曳移動。
在SingleFile的選項裡面還可以進一步設定SingleFile保存網頁時的各項細節。甚至還可以設定將儲存的網頁自動上傳到GitHub、WebDAV或Google Drive上。
https://github.com/gildas-lormeau/single-file-cli
除了在瀏覽器的擴充功能使用SingleFile之外，我們也可以用命令列的指令來使用SingleFile下載檔案。作者gildas在single-file-cli保存庫裡提供了Docker和自行編譯的功能。screenbreak也進一步將此包裝成SingleFile-dockerized網頁服務。這非常適合開發者深入研究。
結語 / In closing
SingleFile是將網頁保存HTML檔案的強力工具。跟將網頁列印成PDF的做法不同，SingleFile所保存的HTML檔案不僅能夠盡可能保留網頁本身的特性，也可以將網頁使用的圖片、字型、樣式、腳本等各式各樣的資源，全部都整合到單一的HTML檔案中。
https://zh.wikipedia.org/zh-tw/MHTML
類似的概念在早期的時候是以MHTML網頁封存檔為主。MHTML的目的也是將圖片、Flash動畫、Java小程式等各種不同的資源保存成單一檔案。然而，MHTML檔案保存的資料並單純的HTML語法，而是採用了電子郵件.eml的格式。MHTML檔案最早是由Internet Explorer發起，後續有部分瀏覽器也能夠支援。但到了現代，大多數瀏覽器都已經不再支援MHTML檔案。
因此，如果你要保存網頁的話，現在使用SingleFile會是更好的選擇。
那麼這篇關於SingleFile的介紹就到此為止了。文章最後的問題是：你通常會怎麽保存電腦上看到的內容呢？
- 1. 選取、複製、貼上到文件。
- 2. 截圖。
- 3. 列印成PDF檔案。
- 4. 其他：歡迎在下面留言分享你的做法喔！
也可以用 WebScrapBook，支援更多種儲存格式，還能存入資料庫供後續編輯及全文檢索，而且是台灣人寫的還有中文說明文件。
回覆刪除感謝推薦~
刪除謝謝您推薦這個SingleFile 我用了 非常好用 比原本的另存新檔好用太多了
回覆刪除那真是太好了！
刪除