阿坝州网站建设公司

Windows小技巧--Chrome浏览器中页面保存技巧

本文主要以百度首页为例，记录Chrome浏览器中，保存页面的多种方式（涉及一些Chrome的“小技巧”），涉及插件使用请自行尝试，本文仅对不使用插件的情况下保存页面的不同处理方法做简单介绍。

创新互联是一家集网站建设,桃城企业网站建设,桃城品牌网站建设,网站定制,桃城网站建设报价,网络营销,网络优化,桃城网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

系统环境：Windows10、Chrome 70.0.3538.110（正式版本） （64 位）.

保存离线页面

说到页面离线保存，首先想到的就是右键保存（Ctrl + S），这样的方式保存会把当前页面的资源保存下来，并放到一个目录下面，大致效果如下：

Windows小技巧 -- Chrome浏览器中页面保存技巧

在想要编辑页面源码等情况下，可以使用此方法，如果只想获取单个离线页面文件用来离线查看，则可以尝试保存当前页面为MHTML文档，可以使用插件（Save As MHT 、Save As MHTML 等） 或Chrome原生支持来完成此功能。

Chrome浏览器保存MHTML格式页面

很多浏览器（IE 5.0+、Opera 9.0+、Chrome等）都支持存储MHTML格式页面，大多不支持的浏览器，也有对应的插件可以处理。

在Chrome中，要保存MHTML格式页面，需要在Chrome的实验×××设置中开启。

首先，在Chrome浏览器的地址栏输入 chrome://flags ，可以进入Chrome的实验×××设置页面

Windows小技巧 -- Chrome浏览器中页面保存技巧

在页面的搜索框内输入 mhtml ，找到 Save Page as MHTML 项（或直接在地址栏输入 chrome://flags/#save-page-as-mhtml），将该项设置为 Enabled ，然后点击底部提示中的 RELAUNCH NOW 按钮重启浏览器，使修改生效。

Windows小技巧 -- Chrome浏览器中页面保存技巧

重启浏览器后，在需要保存的页面中，右键，选择另存为（或快捷键 Ctrl + S），弹出的另存为窗口，保存类型选择 网页（单个文件）

Windows小技巧 -- Chrome浏览器中页面保存技巧

附：IE保存MHT格式页面

MHTML（维基百科 | 百度百科），网页归档，又称单一档案网页或网页封存档案，可以将一个多附件网页保存为单一文档，文档扩展名为 .mht 或 .mhtml。IE浏览器支持保存 .mht 文件，下面做简单介绍。

IE浏览器中打开需要保存的百度首页页面链接，然后右键保存（Ctrl + S），出现的保存窗口中，选择保存类型 *.mht

Windows小技巧 -- Chrome浏览器中页面保存技巧

此时可以看到一个百度的MHT文件，文本编辑器打开后，可以看到类似下面的代码：

Windows小技巧 -- Chrome浏览器中页面保存技巧

这里可以看到MHTML文档是基于超文本标记语言的，里面可以看到经过处理的页面代码。

保存PDF页面

Chrome中PDF格式页面保存，可以通过 PrintFriendly & PDF (有Chrome插件）等在线处理服务或使用Chrome插件（Save As PDF）实现，也可以通过打印来实现。

Chrome打印预览中保存页面PDF

在想保存的页面中，快捷键 Ctrl + P （或右键菜单 -> 打印(p)...），打开页面的打印浏览界面

Windows小技巧 -- Chrome浏览器中页面保存技巧

此时可以看到站点的打印预览效果（默认黑白显示），在左侧选项中找到 目标打印机 -> 更改... ，在弹出的选择界面中，找到 另存为 PDF ，双击即可

Windows小技巧 -- Chrome浏览器中页面保存技巧

此时就可以看到站点的彩色版预览效果，点击左侧的 保存 按钮即可将站点存储为PDF格式。

保存图片页面

部分情况下，可能会需要截取页面，有时仅需要截取部分内容，这通过普通的截图工具即可完成，如QQ截取、微信截图、Windows自带截图工具等等；而有时可能需要截取页面长图，这也可以通过工具来实现，如FastStone Capture、Chrome插件（FireShot、Full Page Screen Capture）等。这里简单介绍 FastStone Capture 和Chrome截图方法，其他方式不赘述。

截图工具实现图片页面保存

打开工具 FastStone Capture ，选择 捕捉滚动窗口 按钮，则可以进入长图截图窗口

Windows小技巧 -- Chrome浏览器中页面保存技巧

FastStone Capture的捕捉滚动窗口，可以支持自动滚动窗口及自定义滚动窗口，可以根据需要选择，以达到截取所需内容的目的（自定义滚动截图不太好使，不容易把控结束时间，截取的图片可能需要再次编辑）

Chrome浏览器命令行菜单实现图片页面保存

在Chrome浏览器的开发者工具中（devtools），也提供了类似主流编辑器（Sublime Text, Atom, Visual Studio Code等）中的命令行菜单，通常使用 Ctrl + Shift + P ( Mac 上是 Cmd + Shift + P) 。如Sublime Text的命令行菜单：

Windows小技巧 -- Chrome浏览器中页面保存技巧

使用Sublime Text的朋友应该很熟悉这个了，而命令行菜单带来的遍历是不言而喻的。

在Chrome浏览器中，首先 F12 打开 DevTools 开发者工具，然后在DevTools中使用快捷键 Ctrl + Shift + P ，就可以打开Chrome的命令行菜单：

Windows小技巧 -- Chrome浏览器中页面保存技巧

在命令行菜单中，输入 capture 就可以看到有如下选项

Windows小技巧 -- Chrome浏览器中页面保存技巧

这里可以看到，Chrome命令行菜单提供了三个用于界面捕获的命令

  • Capture full size screenshot - 截取整个站点（长图）
  • Capture node screenshot - 截取选择的DOM节点
  • Capture screenshot - 截取视图窗口显示的部分

在命令行内输入对应的命令，即可完成截图。

附：Chrome浏览器站点移动端视图截图

上面介绍了截取站点方法，这里额外说下，想截取站点在不同像素显示下响应显示时，截取类似移动端长图的方法。

同样在Chrome浏览器中，打开DevTools，然后点击按钮，点击 toggle device toolbar（切换设备工具栏） ，可以看到类似如下效果：

Windows小技巧 -- Chrome浏览器中页面保存技巧

在这个工具栏中，可以通过切换不同的设备（不同的分辨率），来查看站点在不同的分辨率下的显示情况，可以很好的辅助站点的响应式开发工作。在这个视图中，可以通过点击顶部菜单项最右边的三个点，来打开菜单，里面有截取屏幕的选项，如下：

Windows小技巧 -- Chrome浏览器中页面保存技巧

Headless Chrome模式完成页面截图及转存PDF

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渲染引擎提供功能。可以在无UI窗口的情况下，完成很多浏览器的操作，是自动测试和服务器环境的绝佳工具。更多内容参看官方说明。

Headless Chrome 保存页面

管理员模式运行命令行窗口，使用 cd 命令进入Chrome浏览器安装目录，输入类似如下命令：

chrome --headless --disable-gpu --dump-dom https://www.baidu.com

测试了下，好像没有效果，具体原因不清楚。。。有知道的朋友，希望可以不吝赐教！！！

Headless Chrome 保存页面PDF

管理员模式运行命令行窗口，使用 cd 命令进入Chrome浏览器安装目录，输入类似如下命令：

chrome --headless --disable-gpu --print-to-pdf='存储路径\文件名称' https://www.baidu.com

Windows小技巧 -- Chrome浏览器中页面保存技巧

注意，此处如果不给存储路径和文件名称，则保存的pdf可以在Chrome浏览器安装目录下对应版本号的目录文件下，文件名称为 output.pdf

Windows小技巧 -- Chrome浏览器中页面保存技巧

Headless Chrome 页面截图

管理员模式运行命令行窗口，使用 cd 命令进入Chrome浏览器安装目录，输入类似如下命令：

chrome --headless --disable-gpu --screenshot='存储路径\文件名称' https://www.baidu.com

## 设置图片大小(尺寸大小好像没有用，具体作用自行研究)
chrome --headless --disable-gpu --screenshot='存储路径\文件名称' --window-size=宽,高 https://www.baidu.com

Windows小技巧 -- Chrome浏览器中页面保存技巧

注意，此处如果不给存储路径和文件名称，则保存的pdf可以在Chrome浏览器安装目录下对应版本号的目录文件下，文件名称为 output.pdf

Windows小技巧 -- Chrome浏览器中页面保存技巧

Puppeteer

Chrome官方推出的Puppeteer（封装了Headless Chrome的Node库），可以完成浏览器中手动执行的大多数操作：

  • 生成页面的屏幕截图和PDF。
  • 抓取SPA（单页面应用程序）并生成预渲染内容（即“×××”（服务器端渲染））。
  • 自动化表单提交，UI测试，键盘输入等。
  • 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
  • 捕获站点的时间线跟踪，以帮助诊断性能问题。

  • 测试Chrome扩展程序。

    该库具体功能详见 此处 | Github地址。

类似的还可以尝试PhantomJS -- 可编写脚本的无头浏览器

阅读参考

  • Chrome 开发者工具中的命令菜单
  • DevTools Digest: More Power with the New Command Menu -- Google developers
  • Chrome DevTools: Use the Command Menu to access almost everything in DevTools in a few keystrokes
  • Headless_software -- 维基百科
  • chromeless(已停止维护，推荐使用Puppeteer)
  • 使用 Chrome Headless 模式将 HTML 转 PDF
  • Chromium命令行开关列表

网页标题：Windows小技巧--Chrome浏览器中页面保存技巧
本文地址：http://azwzsj.com/article/jdeooh.html

其他资讯