[使用案例](https://openscreenshot.app/zh-tw/use-cases/)

# 如何儲存網頁的視覺副本

把整個網頁擷取成 PNG 或 PDF，用日期和網域為檔案命名，並處理會儲存成多張圖片的超長網頁。

作者 [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

要保存網頁的視覺副本，請用**整個網頁**擷取，並以檔名含日期和網站的 PNG 或 PDF 儲存。OpenScreenShot 會捲動網頁，把各部分拼接成一張圖片，並把檔案存在你的電腦上。截圖記錄的是網頁在你畫面上的樣子；它不能證明網頁是真實的或未經更改。

## 逐步儲存網頁副本

1. 從彈出式視窗或工具列圖示的右鍵選單開啟**設定**。把**檔名範本**設成含有 `{date}` 和 `{domain}` 的格式，例如 `Archive/{domain}/{date}_{title}`。
2. 開啟網頁。先完整捲動一次，讓延遲載入的圖片和留言載入，再回到頂端。
3. 點 OpenScreenShot 圖示。在預設設定下，這會開始**整個網頁**擷取，並在**編輯器**中開啟結果。
4. 檢查頂端、底部，以及任何捲動時才載入的區塊。
5. 點**儲存圖片**。在**匯出**對話框中選擇 **PNG** 或 **PDF**，確認檔名，再點**匯出**。

要不經過編輯器直接儲存，請在**設定**中把**擷取後**設為**下載**。之後每次擷取都會以 PNG 直接存到你的下載資料夾，並依你的範本命名。

## PNG 還是 PDF？

選擇 **PNG** 可保留擷取的每個像素。它是無損格式，介面文字保持清晰，任何圖片檢視器都能開啟。

副本要放進文件資料夾或需要列印時，選擇 **PDF**。在**頁面大小**下，**原尺寸**會產生一頁與圖片同尺寸的頁面。**A4** 或 **Letter** 搭配**分成多頁**，會把長擷取分成多頁，每頁重疊 5 mm。PDF 以圖片形式保存截圖，所以其中的文字無法搜尋或選取。[截圖轉 PDF 指南](https://openscreenshot.app/zh-tw/blog/save-screenshot-as-pdf/)比較了各種版面。

## 為檔案命名，方便日後尋找

檔名範本接受這些代號：

- `{date}`：日期，格式為 YYYY-MM-DD，取自你電腦的時鐘
- `{time}`：時間，格式為 HHMMSS
- `{domain}`：網站的主機名稱，不含 `www.`
- `{title}`：網頁標題，檔名無法容納的字元會被替換
- `{w}` 和 `{h}`：圖片的寬度和高度（像素）

範本中的 `/` 會存到「下載」內的資料夾，所以 `Archive/{domain}/{date}_{title}` 會先依網站、再依日期整理副本。**設定**中的即時預覽會在擷取前顯示結果。

## 超長網頁

一張圖片最多可容納 32,000 裝置像素高的網頁。更高的網頁會儲存成最多六張圖片。使用**下載**時，每個部分都依你的範本命名，並加上 `_part1of3` 這類後綴。使用**編輯器**或**剪貼簿**時，每個部分會在各自的編輯器分頁中開啟，你要分別匯出。

高到六張圖片都放不下的網頁會被拒絕並顯示錯誤。請改用**可見範圍**或**選取區域**擷取你需要的區塊。[整頁截圖指南](https://openscreenshot.app/zh-tw/blog/full-page-screenshot-chrome/)說明其他情況，例如巢狀捲動區域和固定式頁首。

## 截圖能顯示和不能顯示的內容

截圖是你的瀏覽器在某一刻顯示內容的視覺紀錄。它沒有簽章或防竄改檢查，任何人都能編輯圖片檔。`{date}` 代號取自檔案命名當下你電腦的時鐘。需要證明網頁曾以某種形式存在時，請使用專為此用途打造的服務，並把截圖留作個人參考。

整頁擷取也會漏掉網頁從未呈現的內容：收合的區塊、網頁的其他分頁、超過你捲動位置的無限動態，以及你沒有開啟的登入後內容。

## 副本存放在哪裡

OpenScreenShot 在你的瀏覽器中處理擷取，並存放在你裝置上的本機儲存空間。它不會把擷取上傳到伺服器。匯出的檔案會存到你的下載資料夾。在你分享或上傳之前，它們都留在你的電腦上，而你上傳到的服務有自己的儲存規則。詳情請參閱[隱私權政策](https://openscreenshot.app/zh-tw/privacy/)。

[設定參考](https://openscreenshot.app/zh-tw/docs/#settings)說明檔名範本。要為同事標記擷取，請參閱[為設計審查擷取網頁](https://openscreenshot.app/zh-tw/use-cases/design-review/)。

## 繼續閱讀

[閱讀說明文件](https://openscreenshot.app/zh-tw/docs/)、[瀏覽所有指南](https://openscreenshot.app/zh-tw/blog/)，或[取得擷取方面的協助](https://openscreenshot.app/zh-tw/support/)。

---

Canonical page: https://openscreenshot.app/zh-tw/use-cases/archive-web-pages/