
大部分的常見瀏覽器都有內建另存頁面、另存新檔功能,可以將看到的網頁保存到電腦,不過如果選擇完整網頁會發現瀏覽器其實是將所有檔案保存在另一個資料夾,像是 CSS、圖片和字型檔案等等,為了要讓網頁正常顯示,需要將 HTML 和這個資料夾放在一起才行,可能很多人覺得非常困擾吧!如果你有另存網頁的需求,可試試看接下來介紹的瀏覽器外掛。
本文要推薦的「SingleFile」是一個免費 Chrome 擴充功能,主要功能是將一個完整頁面保存在單一 HTML 檔案中,也就是說要保存某個網頁只要透過 SingleFile 就能解決很多麻煩,更棒的是可以將網頁相關元件(包括 CSS、JavaScript、圖片、字型和框架)合而為一,使用者只會得到副檔名為 .html 的網頁檔案,對於要保存、備份或分享網頁來說都很有用。
除了保存完整網頁,SingleFile 也有標註並保存網頁、保存所選鏈結、保存選中部分、保存標籤頁和自動保存功能,亦可針對使用者介面、檔案名稱、HTML 內容、樣式表、圖片、字型和其他各種資源進行預先設定調整,雖然是一個看似簡單的功能但選項很細緻,如果會需要保存網頁的話不妨下載試試看,SingleFile 同時也適用於 Microsoft Edge 或其他 Chromium 瀏覽器。
SingleFile
Chrome 線上應用程式商店
使用教學
STEP 1
開啟 SingleFile 擴充功能頁面,點選右上角「加到 Chrome」安裝到瀏覽器就能使用。

STEP 2
最簡單的用法是點選 SingleFile 在瀏覽器右上角工具列的圖示,透過此外掛保存當前網頁。

STEP 3
點選後左下角會開始顯示目前進度,SingleFile 優點是遇到使用延遲載入(Lazy Load)技術的網頁圖片也能正常保存,在處理時網頁會稍微變暗,等待處理完成後就會跳出下載畫面。

使用 SingleFile 保存網頁只會產生一個 .html
格式檔案,打開就會顯示內容,相較於瀏覽器內建的另存網頁來說更簡單、方便,也不用擔心在搬移或複製時漏掉網頁相關檔案資料夾造成頁面不完整或無法顯示。

STEP 4
點選 SingleFile 選單還有標註並保存該頁面、保存所選鏈結、保存選中部分、保存標籤頁或是開啟自動保存功能,不一定要完整儲存整個網頁。

特別是標註保存頁面功能,點選後會在瀏覽器上方顯示一排功能列,可對頁面進行標記、繪製特定範圍或裁切等等基本的編輯操作。

STEP 5
SingleFile 更多的選項在擴充功能設定,可對用戶介面、檔案名、HTML 內容、樣式表、圖片和字體檔案進行調整,如果你發現 SingleFile 預設的設定值無法符合需求,也能在擴充功能設定裡找找看可否更改。

值得一試的三個理由:
- SingleFile 是免費網頁下載外掛,適用於 Chrome、Edge 瀏覽器
- 可將一個完整頁面保存在單一 HTML 檔案中,相關檔案合而為一
- 具有標註功能,亦可保存所選鏈結、保存選中部分或是保存標籤頁