為什麼網頁保存軟體或插件都需要重新排版？

01-15

不可以直接保存網頁原貌嗎，就像網頁截圖

不能。因為「以 HTML 格式保存網頁」這個需求本身就是錯的，我們只能盡量做得比較接近，比如各種瀏覽器自帶的保存網頁功能。

在以前全是靜態網頁的時候還勉強說得過去，現在的網頁各種引外部資源和動態產生內容，那具體怎麼保存，這裡面很多邊邊角角的東西你一下子很難解釋清楚的。但是你只有把這些邊邊角角的東西全都說清楚，才能實現出這個功能。

比如：

對於 Js 裡面動態產生的內容 (例如獲取顯示當前時間)，我們是把顯示的時間保存下來 (也就是保存顯示出來的 DOM 樹)，還是每次打開的時候都重新獲取時間？
網頁裡面引用的外部圖片要不要一起保存下來？CSS 裡面引用的字體呢？視頻呢？視頻版權方願意嗎？
如果我們在 500 px 寬度的瀏覽器窗口裡保存了網頁，在 1000 px 寬度的瀏覽器里打開，那正文應該顯示為多寬？如果原始網頁用到了響應式設計，在不同寬度下長得很不一樣呢？

所以我理解這其實是 HTML 在設計時挖的一個坑。可以在瀏覽器裡面嘗試保存一些網頁，打開看保存下來的 HTML 內容和網上的源文件有什麼區別來嘗試理解你的瀏覽器是如何解答上面這些問題的。

@王韋恩卑鄙提到了 MS IE 裡面的 MHT 格式，這個格式和 MS Outlook 保存郵件的格式很像，可以把引用到的其他資源文件像電子郵件附件那樣用 base64 等編碼放進同一個文本文件里。這在一定程度上解決了引用資源的問題，但是網頁里動態產生的內容，或者說，「狀態」怎麼保存依然是一個問題，因為它依然是基於 HTML 的。

考慮另外一個類似的問題，如何保存一個正在運行的應用程序（比如 Windows 上的 .exe 程序）的狀態，中斷掉，下次取出來完美地繼續運行？很接近的一個情形是你在 MS Word 裡面編輯文檔，保存，關掉，下次可以打開文檔繼續編輯；或者在遊戲裡面存檔，關掉，下次讀檔繼續遊戲。這個區別在於，這個「保存狀態」的功能是由應用程序（MS Word、遊戲）自己提供的，因為它最知道自己的狀態有哪些、如何保存、如何恢復。而不是由操作系統把整個程序的內存內容保存下來、下次恢復到內存（在這裡操作系統如果不特別保護一下，那下次很多指針的位置可能就不對了，程序直接崩潰掉）。但是，如果操作系統運行在虛擬機里，我們可能可以直接暫停這個虛擬機，把虛擬機的全部保存狀態保存到磁碟，下次從磁碟恢復。你注意，無論是 Word 保存的文檔還是遊戲保存的存檔，都有自己的格式，而不是一個 .exe 文件你點一下就可以打開了。

把上面這段話的意思套用到網頁上，也就是：

瀏覽器本身不是很清楚對面前這個網頁來說，有意義的「狀態」信息是哪些。網頁本身應該是清楚的，至少有能力分清楚哪些應該保存、哪些不應該保存。
要完美保存網頁狀態，可能 HTML 格式本身是不夠的。如果這個結論成立，那以 HTML 為介質的「保存網頁」功能就只能是不完美的了。

「狀態」大概可以這麼理解：給我網頁，外加一段「狀態」信息，我就能保證頁面以完美的方式重新呈現給用戶。類似於保存在磁碟上的 Word 文檔 (.docx) 文件。

iOS 8 上的印象筆記插件（Share Extension）就可以。

Safari/Google Search 等有分享功能的瀏覽器，點分享就行了。

知乎的網頁是特別難保存的，因此我測試各種軟體網頁保存效果時用知乎頁面作為主要測試源。

經過我的長期測試，火狐擴展scrapbook 保存頁面效果最好。我還測試過印象筆記、為知筆記、ie自帶保存網頁功能、chrome自帶保存網頁功能、火狐自帶保存網頁功能……

另外，scrapbook有一個衍生版本scrapbook x。

multiple1902提到網頁保存的各種問題，不過題主既然提到網頁截圖，應該是想將頁面作為靜態形式保存吧。也就是說，對於multiple1902的如下問題：

對於 Js 裡面動態產生的內容 (例如獲取顯示當前時間)，我們是把顯示的時間保存下來 (也就是保存顯示出來的 DOM 樹)，還是每次打開的時候都重新獲取時間？

網頁裡面引用的外部圖片要不要一起保存下來？CSS 裡面引用的字體呢？視頻呢？視頻版權方願意嗎？

如果我們在 500 px 寬度的瀏覽器窗口裡保存了網頁，在 1000 px 寬度的瀏覽器里打開，那正文應該顯示為多寬？如果原始網頁用到了響應式設計，在不同寬度下長得很不一樣呢？

如果題主的回答分別是「保存顯示的時間」、「要」、「500px」，那就用scrapbook 或者scrapbook x最好。

Evernote的web clipper不是你想要的效果嗎？

你用過IE 的保存為MHT嗎？

其他的插件我能說他們技術不行嗎？

有時候不僅僅是保存，還有其他的需求，包括但是不限於：

1、保存後的檢索。不可能在一堆html文件裡面去一個個找；

2、保存後的多平台同步。比如pc端保存，其他端比如手機端、平板端的檢索、查看；

3、某些端無法保存html，比如移動端、ios端。這時候就需要其他方法。

有時候多想想應用的場景，而不是我就這麼用也行，就夠了，你們那些花里胡哨的用法都是異端。

手機版chrome自帶保存為pdf的功能，如果你只是想看看網頁的話和截圖效果一樣好……

我沒明白題主你的意思，想幫你改標題但不明就裡的這不好改，建議你自己改一下吧。

順便說一下，基本所有瀏覽器都可以直接另存為html外加圖片、CSS和JS等外部文件，我不知道你用的是什麼插件，反正通常情況下這樣都不會變形。或者IE也可以直接保存為單個文件的mht格式，不過這個也就只是單個mht格式文件。