如何完整離線保存網(wǎng)頁(yè)，包括網(wǎng)頁(yè)完整特效？

時(shí)間：2024-01-09 03:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-01-09 03:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何完整離線保存網(wǎng)頁(yè)，包括網(wǎng)頁(yè)完整特效？：不知道大家經(jīng)歷沒(méi)經(jīng)歷過(guò)被 404 支配的恐懼，有過(guò)這樣慘痛教訓(xùn)的小伙伴一定知道，不能把資源放在一個(gè)籃子里，是最基本的操作。

那不放一個(gè)籃子里，就得先把資源保存到本地，影視資源是這樣，對(duì)于那些質(zhì)量特別棒、相見(jiàn)恨晚的帖子更是這樣，既避免 404，又方便本地管理。

至于把網(wǎng)頁(yè)、帖子這些圖文保存到本地，最簡(jiǎn)單的就是「Ctrl+S」，保存成 .html 格式的頁(yè)面文件，或者「Ctrl+P」利用瀏覽器自帶的虛擬打印機(jī)保存成 PDF 文件。







這樣保存簡(jiǎn)單是簡(jiǎn)單了，但會(huì)碰到許多問(wèn)題，比如排版丟失、布局錯(cuò)亂，更不要說(shuō)現(xiàn)在很多網(wǎng)頁(yè)為了省資源和提高閱讀體驗(yàn)，會(huì)用上懶加載的方式，需要我們從頭到尾瀏覽一遍，等素材加載完，才能保存。

如果你猴急了，沒(méi)等加載完就直接保存，難免會(huì)翻車(chē)。

所以這個(gè)時(shí)候，就要用上我們的 2.0 方案了，即利用腳本或者瀏覽器擴(kuò)展，來(lái)保存網(wǎng)頁(yè)，我們分享過(guò)的工具有「SingleFile」和「Save Page WE」。

像蘋(píng)果官方公眾號(hào)常用的 SVG 交互動(dòng)畫(huà)式排版，都可以原汁原味的保存下來(lái)：







而對(duì)于懶加載的圖文來(lái)說(shuō)，擴(kuò)展保存也有專(zhuān)門(mén)的優(yōu)化，不用我們手動(dòng)去觸發(fā)，SingleFile 還能批量自動(dòng)保存，以及做筆記或刪除網(wǎng)頁(yè)元素。







如果說(shuō)單純的圖文，其實(shí)有這倆擴(kuò)展就夠了，但我最近又有了新的需求，我想把一些利用 CSS/JS 實(shí)現(xiàn)的在線工具，一口氣也給它保存下來(lái)。

舉個(gè)栗子，有的時(shí)候我們封面圖不是有用到 P 站橘白黑的 Logo 風(fēng)格嘛，其實(shí)是我收藏了一個(gè)在線生成 P 站 logo 的網(wǎng)頁(yè)工具：







至于為啥突然想把這個(gè)在線工具保存到本地？還不是因?yàn)槲乙恢庇玫哪莻€(gè)生成器前段時(shí)間 404 了。

誠(chéng)然，咱很快又找了個(gè)新的，可難免害怕這玩意哪天又涼了，所以才萌生了這樣的想法。。。

不過(guò)當(dāng)我用 SingleFile 和 Save Page WE 保存的時(shí)候，發(fā)現(xiàn)網(wǎng)頁(yè)雖然能完整的保存下來(lái)。







但所有的交互按鈕都是寫(xiě)死了，更別說(shuō)像原網(wǎng)站一樣導(dǎo)出了。







結(jié)果嗎，還真讓我找到了一個(gè)，國(guó)外的擴(kuò)展 ArchiveWeb.page，通過(guò)「錄制」的方式，可以在保留排版布局的前提下，原汁原味的保留按鍵交互，和導(dǎo)出功能。







好家伙，利用 ArchiveWeb.page，相當(dāng)于我把這個(gè)別人搭建好的成品小工具，直接就保存到本地了。

看來(lái)，我們的本地網(wǎng)頁(yè)保存方案，是時(shí)候進(jìn)軍 3.0 了。

具體操作

ArchiveWeb.page 這個(gè)擴(kuò)展是基于 Chrome 實(shí)現(xiàn)的，但我測(cè)試過(guò)了，只要是 Chromium 內(nèi)核的瀏覽器，都可以使用，Edge 也不例外。

有能力訪問(wèn) Chrome 擴(kuò)展商店的小伙伴，可以直接去商店下載，當(dāng)然，我也準(zhǔn)備好了最新版的 .crx 文件。

咱們可以通過(guò)在擴(kuò)展管理頁(yè)面，打開(kāi)「開(kāi)發(fā)人員模式」后，直接拖拽 .crx 到瀏覽器的方式安裝。







安裝好擴(kuò)展，我們就可以開(kāi)啟第一次錄制了，點(diǎn)擊擴(kuò)展圖標(biāo)，看到彈窗里有個(gè)「Start」的開(kāi)始按鈕。







開(kāi)始后，當(dāng)前網(wǎng)頁(yè)會(huì)重新加載，此時(shí)加載的外部資源會(huì)一并捕獲。

注意，這里有個(gè)調(diào)試此瀏覽器的通知橫幅，如果沒(méi)有橫幅，那證明沒(méi)有捕獲成功，不用做更多的操作。

像咱們這個(gè) P 站 logo 生成器，不過(guò)是個(gè)單一網(wǎng)頁(yè)，只要等擴(kuò)展圖標(biāo)變成綠色，點(diǎn)擊「Stop」停止錄制，我們就保存成功啦。







想訪問(wèn)保存好的網(wǎng)頁(yè)，或是下載到本地，只用重新找到擴(kuò)展圖標(biāo)，點(diǎn)擊里面的主頁(yè)按鈕。







這里存放著我們剛剛保存的網(wǎng)頁(yè)，可以點(diǎn)擊下載圖標(biāo)到以 WACZ 格式保存本地。







發(fā)現(xiàn)沒(méi)，這里下載的不是一個(gè)網(wǎng)頁(yè)，而是一個(gè)合集，如果你保存了多個(gè)網(wǎng)頁(yè)，那點(diǎn)進(jìn)去就能訪問(wèn)或下載：







在訪問(wèn)時(shí)，會(huì)有個(gè)目錄，這里就是我們保存好的在線工具啦。







當(dāng)然，我們可以在擴(kuò)展圖標(biāo)準(zhǔn)備錄制的時(shí)候，選擇不同的合集：







亦或在主頁(yè)，導(dǎo)入本地的合集或網(wǎng)頁(yè)：







不過(guò)有一說(shuō)一，我測(cè)試了很多在線工具，ArchiveWeb.page 能保存的，是要前端實(shí)現(xiàn)的工具才行。

像 OCR、圖片摳圖這樣的在線工具，需要連接服務(wù)器才能搞定的網(wǎng)頁(yè)，ArchiveWeb.page 就幫不上什么忙了。

但是，這不妨礙人家強(qiáng)啊，單一網(wǎng)頁(yè)不說(shuō)了，輕松搞定，它厲害的點(diǎn)還在于，錄制過(guò)程中在網(wǎng)頁(yè)內(nèi)產(chǎn)生的跳轉(zhuǎn)都能一起捕獲。

舉個(gè)栗子，公眾號(hào)的文章合集，我開(kāi)啟錄制后，點(diǎn)一下里面的文章：







錄制后，你會(huì)發(fā)現(xiàn)，連點(diǎn)進(jìn)去的文章都捕獲了，還能從上一個(gè)網(wǎng)頁(yè)直接跳轉(zhuǎn)：







如果你要錄制的是社交媒體平臺(tái)，有那中瀑布流自動(dòng)加載，記得勾選「Start With Autopilot」，只有這樣才能捕獲更復(fù)雜的網(wǎng)站交互。







要說(shuō) ArchiveWeb.page 有什么不足，大概就是這玩意沒(méi)有漢化了，但相信聰明如你，看了這篇文章，摸索個(gè)兩分鐘就搞定了。

結(jié)語(yǔ)

雖說(shuō)是本地保存 3.0，但實(shí)話實(shí)說(shuō)，ArchiveWeb.page 導(dǎo)出的 WACZ 格式?jīng)]有直接 HTML 那樣好管理，多半還要借助擴(kuò)展訪問(wèn)。

所以我的建議還是和 SingleFile 等擴(kuò)展搭配著來(lái)用，如果像保存的網(wǎng)頁(yè)不用交互，那怎么保存都行；如果需要交互，ArchiveWeb.page 是不二之選。

這么有趣還有用的工具，你還不快去試試？老規(guī)矩，我把 ArchiveWeb.page 放后臺(tái)了，感興趣的小伙伴自取吧。

https://wwz.lanzouw.com/iqi9n0cd82yf

本文首發(fā)于微信公眾號(hào)網(wǎng)羅燈下黑（wldxh8），未經(jīng)授權(quán)請(qǐng)勿轉(zhuǎn)載！

一如既往感謝各位小伙伴的支持和關(guān)注！