SingleFile 將完整網頁保存為單一 HTML 格式下載(Chrome 擴充功能)

SingleFile 將網頁保存為單一 HTML 格式下載(Chrome 擴充功能)

大部分的常見瀏覽器都有內建另存頁面、另存新檔功能,可以將看到的網頁保存到電腦,不過如果選擇完整網頁會發現瀏覽器其實是將所有檔案保存在另一個資料夾,像是 CSS、圖片和字型檔案等等,為了要讓網頁正常顯示,需要將 HTML 和這個資料夾放在一起才行,可能很多人覺得非常困擾吧!如果你有另存網頁的需求,可試試看接下來介紹的瀏覽器外掛。

FireShot 免費網頁截圖工具推薦,可捕捉完整網頁畫面或可見範圍

FireShot 免費網頁截圖工具推薦,可捕捉完整網頁畫面或可見範圍

想要抓取電腦螢幕畫面方法很多,除了使用系統內建的擷圖功能,也有不少擷圖軟體或瀏覽器擴充功能可用,當然現在還有線上螢幕錄影工具,只要打開瀏覽器就能進行桌面錄影或攝影機影像錄製,還能搭配上麥克風或其他聲音輸入,對於要製作教學或素材就變得很有用。順帶一提,上個月介紹的 Dropbox Capture 是我覺得非常便捷的螢幕擷取軟體,截圖錄影後可立即產生分享鏈結。

Google Chrome 推出「閱讀清單」,收藏想閱讀還沒時間瀏覽的網頁

Google Chrome 推出「閱讀清單」,收藏想閱讀還沒時間瀏覽的網頁

前幾週介紹 Microsoft Edge 瀏覽器新加入「集錦」功能,就如同瀏覽器內建剪貼簿,可將看到的網頁、圖片或影像新增到集合中,以利於收集和整理資料,再依照需求建立不同的分類,我覺得這功能非常實用,對於要暫存資料、或當下沒時間只能「稍後閱讀」來說 Edge 集錦提供了很好的解決方案,還能透過瀏覽器內建的同步功能,在所有使用 Microsoft Edge 瀏覽器裝置上同步並存取相同紀錄。

Microsoft Edge 瀏覽器「集錦」功能可收集整理網頁、影像或文字

Microsoft Edge 瀏覽器「集錦」功能可收集整理網頁、影像或文字

如果經常在網路上搜尋網頁、收集內容,應該也會有個自己習慣保存資料的地方,像我就很習慣將找到的資訊以超連結形式保存在 Pocket,這是一個大家都很熟悉的「稍後閱讀」功能,對於要組織或整理資料來說很有用。除此之外,我也會以手機的備忘錄或 Google Keep 儲存同步鏈結以外的內容。

Snippyly 擷取網頁畫面、編輯並產生可編輯分享鏈結(Chrome 擴充功能)

Snippyly 擷取網頁畫面、編輯並產生可編輯分享鏈結(Chrome 擴充功能)

如果要跟同事或朋友說明網站上某個功能的位置,用文字可能容易有誤差或找不到,通常會直接擷取網頁、標註框線或加入文字描述,這個流程使用手機操作並不會太難,若是要在電腦前進行就必須要知道如何擷圖、編輯圖片甚至是上傳到圖片空間,有些瀏覽器擴充功能就解決這一系列麻煩,像是 Smartshot 可以快速擷取網頁畫面、對圖片裁切或加上框線、標記箭頭;qSnap 一鍵將網頁轉圖片,可編輯後上傳產生分享鏈結。

PrintFriendly 讓網頁適合列印或轉 PDF,移除側邊欄或廣告更省紙張墨水

PrintFriendly

如果你在工作上會時常需要將網頁列印出來,或是轉為 PDF 格式保存,可能會發現一般網頁列印效果很差,而且可能會帶入許多不必要的資訊(例如導覽列、廣告或其他功能),無形中耗費許多紙張和墨水。比較好的作法是先用瀏覽器的閱讀模式,僅保留最重要的部分,再將內容輸出會好很多;若你想要維持看到的網頁樣式,亦可利用瀏覽器的「開發人員工具」先手動移除不必要的部分,就能讓列印的範圍縮小,也能減少不必要的浪費。

Full Page Screen Capture 快速擷取完整網頁畫面,轉為圖片或 PDF 格式(Chrome 擴充功能)

Full Page Screen Capture 快速擷取完整網頁畫面,轉為圖片或 PDF 格式(Chrome 擴充功能

對於可以保存網頁畫面的截圖工具相信大家都不陌生,像是 WinSnapFastStone Capture 或 Mac 系統很好用的 Jing(現在是 TechSmith Screencast)都能達到類似效果,或是透過瀏覽器擴充功能和線上工具也能做到,通常保存下來的都是靜態圖片格式。如果你想要完整保存某個網頁在某個時間點的樣貌,透過第三方建立更具公信力的網頁備份可能是更好的選擇,我曾介紹過 Wayback Machine 網頁時光機就能讓使用者將頁面完整保存在線上,以便隨時回溯到特定時間:

linkstore.app 網址儲存工具,匿名保存影片、相片或任何網頁免註冊

linkstore.app 網址儲存工具,匿名保存影片、相片或任何網頁免註冊

現在保存鏈結的方式很多,我個人最常用的是 Pocket,透過瀏覽器書籤列能把任何網址加入收藏,其他還有像 Save to Facebook 這類的外掛可以將感興趣、但還沒時間閱讀的內容先暫時儲存到臉書「我的珍藏」,當然直接在社群網站上把貼文儲存起來並不是很困難,大家應該也都知道如何使用,假如在公用電腦或不是自己的電腦,不想登入網路帳號,有沒有快速把鏈結全部儲存在一起的方法呢?

SingleFile 將完整的網頁保存到一個 HTML 檔案中(Chrome、Firefox 擴充功能)

SingleFile 將完整的網頁保存到一個 HTML 檔案中(Chrome、Firefox)

如果要把網頁儲存到電腦中,所有瀏覽器都有另存頁面為 HTML 檔的功能,不過這可能會遇到一些問題,儲存後如果不是各種資源(JS、CSS 和圖片)都必須抓下來,檔案很多,就是打開後樣式跑掉,圖片跑不出來,要把網頁備份起來或傳送給別人就變得很麻煩,那麼有沒有更好的方法將網頁正確保存下來呢?

Zoho Notebook 免費筆記應用可快速將網頁內容擷取保存

Zoho Notebook

平常你都如何保存從網路上找到的重要內容呢?可能很多人習慣直接把網頁加入書籤,或是打開其他編輯器來複製、貼上,但隨著 EvernoteGoogle Keep 這類筆記工具出現其實存在雲端更方便,而現今大部分人的生活脫離不了行動裝置,這些工具也多半有對應的應用程式或手機版可以使用。如果你不希望遇到下次打開鏈結卻找不到內容的窘境,直接為網頁擷圖或將文字圖片備份下來是比較安全的方法。