零、序言

為什么要對網(wǎng)頁進(jìn)行離線保存？

最簡單直接的需求，就是我們想要離線狀態(tài)下查看一些內(nèi)容（比如在無聯(lián)網(wǎng)的電腦上？）或者厭倦了保留下來的鏈接，過段時(shí)間后訪問變成了404。

總而言之，就是因?yàn)橛懈鞣N需要保存下來的理由，這才需要執(zhí)行這個(gè)操作。

那么，這里以Edge瀏覽器（基于Chromium，版本 116.0）為例子，展示對網(wǎng)頁進(jìn)行保存的方式。

注：實(shí)測不同網(wǎng)站的網(wǎng)頁保存效果會有差距，應(yīng)該是網(wǎng)站做了一些限制導(dǎo)致。

注：不建議保存網(wǎng)頁內(nèi)容后將網(wǎng)頁的內(nèi)容用于肆意傳播，畢竟還涉及別人的知識產(chǎn)權(quán)。

一、概覽

在網(wǎng)頁上點(diǎn)擊鼠標(biāo)右鍵。

1、點(diǎn)擊“另存為”（當(dāng)然，可以直接輸入快捷鍵：Ctrl+S 實(shí)現(xiàn)另存為的效果）

此時(shí)可以看到有三種保存類型，等下會一一介紹這三種保存類型。

2、點(diǎn)擊“打印”（當(dāng)然，可以直接輸入快捷鍵：Ctrl+P?實(shí)現(xiàn)另存為的效果）

注意選擇“另存為PDF”，等下也會介紹這個(gè)保存方式。

二、保存類型：網(wǎng)頁，僅HTML

介紹：僅生成一個(gè)網(wǎng)頁文件，保留了網(wǎng)頁中文字的內(nèi)容，但是圖片、Flash動(dòng)畫等全部沒有保存，甚至有時(shí)還會排版丟失、布局錯(cuò)亂。

總結(jié)：如果網(wǎng)頁里只有文本內(nèi)容，無圖片，或者圖片不重要，則可以考慮使用這種方式進(jìn)行保存。

實(shí)際使用：

這是打開后的樣子：

三、保存類型：網(wǎng)頁，單個(gè)文件

介紹：把網(wǎng)頁中全部元素保存在一個(gè)文件里，不額外生成單獨(dú)的文件夾來保存圖片等資源。

關(guān)于mhtml：（可參考相關(guān)材料：https://docs.fileformat.com/zh/web/mhtml/）

具有 MHTML 擴(kuò)展名的文件代表一種網(wǎng)頁存檔格式，可以由許多不同的應(yīng)用程序創(chuàng)建。該格式被稱為存檔格式，因?yàn)樗鼘?web?HTML?代碼和相關(guān)資源保存在單個(gè)文件中。這些資源包括鏈接到網(wǎng)頁的任何內(nèi)容，例如圖像、小程序、動(dòng)畫、音頻文件等。 MHTML 文件可以在各種應(yīng)用程序中打開，例如 Internet Explorer 和 Microsoft Word。 Microsoft Windows 使用 MHTML 文件格式記錄在 Windows 上使用任何引發(fā)問題的應(yīng)用程序期間觀察到的問題場景。 MHTML 文件格式對頁面內(nèi)容進(jìn)行編碼，類似于 message/rfc822 中定義的規(guī)范，這是純文本電子郵件相關(guān)規(guī)范。格式的實(shí)際規(guī)范由?RFC 2557?詳細(xì)說明。

總結(jié)：它就是用于給網(wǎng)頁存檔（也就是我們此時(shí)想要做的離線保存）的一種文件格式。十分適合用于當(dāng)下的需求場景，可以很好地保存整個(gè)網(wǎng)頁的信息，用于在離線狀態(tài)下進(jìn)行打開。

特別地：實(shí)測發(fā)現(xiàn)可以很好地保存蘋果的這個(gè)可交互的酷炫SVG效果。（網(wǎng)頁地址：https://mp.weixin.qq.com/s/WhTd4T84iJIs2JeYdDvsSA）

特別地：其實(shí)還有一個(gè)用處，就是避免站點(diǎn)的種種限制，從而可以任意使用保存下來的網(wǎng)頁中的內(nèi)容

注意：所有的按鈕之類的功能是無效的。此外，這種方式可以保存網(wǎng)頁完整的動(dòng)態(tài)特效，但無法保存網(wǎng)頁的視頻、音頻信息（GIF可以正常保存顯示）

注意：可能存在瀏覽器訪問不兼容的問題

實(shí)際使用：

直接打開這個(gè)文件

四、保存類型：完成（全部）

介紹：會把網(wǎng)頁的全部元素，例如文本、圖片、Flash動(dòng)畫等全部保存下來，生成一個(gè)網(wǎng)頁文件和一個(gè)與該網(wǎng)頁文件同名的文件夾。文件夾里面保存了網(wǎng)頁相關(guān)的圖片、Flash動(dòng)畫等內(nèi)容。

總結(jié)：存在多個(gè)文件不便于導(dǎo)入整理的問題，部分情況下會存在本地資源加載失敗導(dǎo)致頁面啥都沒顯示的問題。實(shí)測動(dòng)態(tài)效果、gif圖等都能很好地保存下來（畢竟這個(gè)方式也把對應(yīng)的資源文件都保存下來了）

實(shí)際使用：

點(diǎn)擊打開網(wǎng)頁文件：

五、另存為PDF

介紹：（Edge官網(wǎng)文檔：https://support.microsoft.com/zh-cn/microsoft-edge/在-microsoft-edge-中打印-38f38d80-d55c-01a6-528d-467cdd8ada2d）

總結(jié)：無法保存動(dòng)圖，文章會因?yàn)镻DF有頁數(shù)的存在而被分頁，觀感不是很好。且實(shí)測很容易出現(xiàn)頁面排版格式混亂的問題。

實(shí)際使用：（快捷鍵：Ctrl + P）

在瀏覽器中點(diǎn)擊鼠標(biāo)右鍵

點(diǎn)擊“打印”

六、網(wǎng)頁捕獲

介紹：（Edge官網(wǎng)介紹：https://www.microsoft.com/zh-cn/edge/features/web-capture?form=MT00D8）

通過對整個(gè)頁面或選定區(qū)域進(jìn)行 Web 捕獲，或使用 Microsoft Edge 中的 Web 選擇直接復(fù)制 Web 內(nèi)容及其格式，輕松使用 Web 內(nèi)容。您可以添加注釋并標(biāo)記稍后使用筆或觸摸拍攝的屏幕截圖。

總結(jié)：需要以圖片形式保存網(wǎng)頁內(nèi)容時(shí)可用，有點(diǎn)類似截圖。不過其實(shí)不太適用于帶gif等效果的網(wǎng)頁。（還有一點(diǎn)就是，這個(gè)是瀏覽器本身的功能，支持所有站點(diǎn)上使用）

實(shí)際使用：

在瀏覽器內(nèi)點(diǎn)擊鼠標(biāo)右鍵

點(diǎn)擊“網(wǎng)頁捕獲”

捕獲區(qū)域：就是選擇一塊區(qū)域進(jìn)行捕獲（類似QQ的截圖），然后可以在上面涂鴉，然后作為圖片導(dǎo)出粘貼或者保存到本地。

捕獲整頁：將整個(gè)網(wǎng)頁保存成一張圖片，然后可以在上面涂鴉，然后作為圖片導(dǎo)出粘貼或者保存到本地。（其實(shí)這個(gè)就類似pdf的作用）

網(wǎng)頁選擇：單擊并拖動(dòng)（注意按住鼠標(biāo)左鍵），可以任意選擇網(wǎng)頁的區(qū)域；相比于“捕獲區(qū)域”，可以滾動(dòng)選?。愃剖謾C(jī)里的“滾動(dòng)截圖”）。這個(gè)不知道為啥，不能涂鴉

七、一些插件或工具

（注：篇幅有限，所以這里沒有去詳細(xì)介紹這些插件/工具，需要大家自行利用搜索引擎去了解使用）

瀏覽器插件：SingleFile

瀏覽器插件：FireShot，可以把網(wǎng)頁保存為長圖，支持保存為PDF文件（默認(rèn)快捷鍵是Ctrl+Shift+Y，其中瀏覽器設(shè)置頁、主頁、附加組件頁會受到保護(hù)，無法截圖）

瀏覽器插件：Pinbox，一款跨平臺的收藏工具，可以用它來記錄靈感，稍后閱讀，保存資料甚至網(wǎng)絡(luò)上的任何內(nèi)容（官網(wǎng)地址：https://withpinbox.com）

瀏覽器插件/全平臺應(yīng)用：Pocket：一個(gè)離線閱讀服務(wù)軟件，Pocket的主要功能就是將你要閱讀或者一時(shí)沒有讀完的網(wǎng)頁標(biāo)記下來，接著同步到服務(wù)器端，然后就可以實(shí)行在不同的設(shè)備上閱讀的功能，而且支持tag，顏值也高。重排版也比較美觀。（官網(wǎng)地址：https://getpocket.com/zh-cn/）

Evernote：比較大而全，全平臺，移動(dòng)端離線的話似乎需要付費(fèi)賬號才可以。優(yōu)點(diǎn)在于可以做筆記。適合保存，收藏，標(biāo)注網(wǎng)頁的需求（官網(wǎng)地址：https://evernote.com/features/webclipper）

Google keep：輕量級，劣勢在于墻。

瀏覽器插件/全平臺應(yīng)用：Raindrop：適合做書簽，可以存單個(gè)文章，也可以存網(wǎng)頁。可以自動(dòng)保存Twitter 或 Youtube 收藏夾。保存的每個(gè)網(wǎng)頁和 PDF 的全部內(nèi)容都是完全可搜索的（需要按年付費(fèi)）。（官網(wǎng)地址：https://raindrop.io）