本文主要以百度首頁為例，記錄Chrome瀏覽器中，保存頁面的多種方式（涉及一些Chrome的“小技巧”），涉及插件使用請自行嘗試，本文僅對不使用插件的情況下保存頁面的不同處理方法做簡單介紹。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,桃城企業(yè)網(wǎng)站建設,桃城品牌網(wǎng)站建設,網(wǎng)站定制,桃城網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,桃城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
系統(tǒng)環(huán)境：Windows10、Chrome 70.0.3538.110（正式版本） （64 位）.
說到頁面離線保存，首先想到的就是右鍵保存（Ctrl + S），這樣的方式保存會把當前頁面的資源保存下來，并放到一個目錄下面，大致效果如下：
在想要編輯頁面源碼等情況下，可以使用此方法，如果只想獲取單個離線頁面文件用來離線查看，則可以嘗試保存當前頁面為MHTML文檔，可以使用插件（Save As MHT 、Save As MHTML 等） 或Chrome原生支持來完成此功能。
很多瀏覽器（IE 5.0+、Opera 9.0+、Chrome等）都支持存儲MHTML格式頁面，大多不支持的瀏覽器，也有對應的插件可以處理。
在Chrome中，要保存MHTML格式頁面，需要在Chrome的實驗×××設置中開啟。
首先，在Chrome瀏覽器的地址欄輸入 chrome://flags ，可以進入Chrome的實驗×××設置頁面
在頁面的搜索框內輸入 mhtml ，找到 Save Page as MHTML 項（或直接在地址欄輸入 chrome://flags/#save-page-as-mhtml），將該項設置為 Enabled ，然后點擊底部提示中的 RELAUNCH NOW 按鈕重啟瀏覽器，使修改生效。
重啟瀏覽器后，在需要保存的頁面中，右鍵，選擇另存為（或快捷鍵 Ctrl + S），彈出的另存為窗口，保存類型選擇 網(wǎng)頁（單個文件）
MHTML（維基百科 | 百度百科），網(wǎng)頁歸檔，又稱單一檔案網(wǎng)頁或網(wǎng)頁封存檔案，可以將一個多附件網(wǎng)頁保存為單一文檔，文檔擴展名為 .mht 或 .mhtml。IE瀏覽器支持保存 .mht 文件，下面做簡單介紹。
IE瀏覽器中打開需要保存的百度首頁頁面鏈接，然后右鍵保存（Ctrl + S），出現(xiàn)的保存窗口中，選擇保存類型 *.mht
此時可以看到一個百度的MHT文件，文本編輯器打開后，可以看到類似下面的代碼：
這里可以看到MHTML文檔是基于超文本標記語言的，里面可以看到經(jīng)過處理的頁面代碼。
Chrome中PDF格式頁面保存，可以通過 PrintFriendly & PDF (有Chrome插件）等在線處理服務或使用Chrome插件（Save As PDF）實現(xiàn)，也可以通過打印來實現(xiàn)。
在想保存的頁面中，快捷鍵 Ctrl + P （或右鍵菜單 -> 打印(p)...），打開頁面的打印瀏覽界面
此時可以看到站點的打印預覽效果（默認黑白顯示），在左側選項中找到 目標打印機 -> 更改... ，在彈出的選擇界面中，找到 另存為 PDF ，雙擊即可
此時就可以看到站點的彩色版預覽效果，點擊左側的 保存 按鈕即可將站點存儲為PDF格式。
部分情況下，可能會需要截取頁面，有時僅需要截取部分內容，這通過普通的截圖工具即可完成，如QQ截取、微信截圖、Windows自帶截圖工具等等；而有時可能需要截取頁面長圖，這也可以通過工具來實現(xiàn)，如FastStone Capture、Chrome插件（FireShot、Full Page Screen Capture）等。這里簡單介紹 FastStone Capture 和Chrome截圖方法，其他方式不贅述。
打開工具 FastStone Capture ，選擇 捕捉滾動窗口 按鈕，則可以進入長圖截圖窗口
FastStone Capture的捕捉滾動窗口，可以支持自動滾動窗口及自定義滾動窗口，可以根據(jù)需要選擇，以達到截取所需內容的目的（自定義滾動截圖不太好使，不容易把控結束時間，截取的圖片可能需要再次編輯）
在Chrome瀏覽器的開發(fā)者工具中（devtools），也提供了類似主流編輯器（Sublime Text, Atom, Visual Studio Code等）中的命令行菜單，通常使用 Ctrl + Shift + P ( Mac 上是 Cmd + Shift + P) 。如Sublime Text的命令行菜單：
使用Sublime Text的朋友應該很熟悉這個了，而命令行菜單帶來的遍歷是不言而喻的。
在Chrome瀏覽器中，首先 F12 打開 DevTools 開發(fā)者工具，然后在DevTools中使用快捷鍵 Ctrl + Shift + P ，就可以打開Chrome的命令行菜單：
在命令行菜單中，輸入 capture 就可以看到有如下選項
這里可以看到，Chrome命令行菜單提供了三個用于界面捕獲的命令
在命令行內輸入對應的命令，即可完成截圖。
上面介紹了截取站點方法，這里額外說下，想截取站點在不同像素顯示下響應顯示時，截取類似移動端長圖的方法。
同樣在Chrome瀏覽器中，打開DevTools，然后點擊按鈕，點擊 toggle device toolbar（切換設備工具欄） ，可以看到類似如下效果：
在這個工具欄中，可以通過切換不同的設備（不同的分辨率），來查看站點在不同的分辨率下的顯示情況，可以很好的輔助站點的響應式開發(fā)工作。在這個視圖中，可以通過點擊頂部菜單項最右邊的三個點，來打開菜單，里面有截取屏幕的選項，如下：
Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform featuresprovided by Chromium and the Blink rendering engine to the command line.
Chrome 59以上版本支持Headless Chrome，Headless Chrome是可以命令行模式運行Chromium和Blink渲染引擎提供功能?？梢栽跓oUI窗口的情況下，完成很多瀏覽器的操作，是自動測試和服務器環(huán)境的絕佳工具。更多內容參看官方說明。
管理員模式運行命令行窗口，使用 cd 命令進入Chrome瀏覽器安裝目錄，輸入類似如下命令：
重慶分公司
重慶分公司
chrome --headless --disable-gpu --dump-dom https://www.baidu.com測試了下，好像沒有效果，具體原因不清楚。。。有知道的朋友，希望可以不吝賜教?。?！
管理員模式運行命令行窗口，使用 cd 命令進入Chrome瀏覽器安裝目錄，輸入類似如下命令：
chrome --headless --disable-gpu --print-to-pdf='存儲路徑\文件名稱' https://www.baidu.com
注意，此處如果不給存儲路徑和文件名稱，則保存的pdf可以在Chrome瀏覽器安裝目錄下對應版本號的目錄文件下，文件名稱為 output.pdf
管理員模式運行命令行窗口，使用 cd 命令進入Chrome瀏覽器安裝目錄，輸入類似如下命令：
chrome --headless --disable-gpu --screenshot='存儲路徑\文件名稱' https://www.baidu.com
## 設置圖片大小(尺寸大小好像沒有用，具體作用自行研究)
chrome --headless --disable-gpu --screenshot='存儲路徑\文件名稱' --window-size=寬,高 https://www.baidu.com
注意，此處如果不給存儲路徑和文件名稱，則保存的pdf可以在Chrome瀏覽器安裝目錄下對應版本號的目錄文件下，文件名稱為 output.pdf
Chrome官方推出的Puppeteer（封裝了Headless Chrome的Node庫），可以完成瀏覽器中手動執(zhí)行的大多數(shù)操作：
測試Chrome擴展程序。
該庫具體功能詳見 此處 | Github地址。
類似的還可以嘗試PhantomJS -- 可編寫腳本的無頭瀏覽器
