将网页进行离线保存的方式

为什么要对网页进行离线保存？

最简单直接的需求，就是我们想要离线状态下查看一些内容（比如在无联网的电脑上？）或者厌倦了保留下来的链接，过段时间后访问变成了404。

总而言之，就是因为有各种需要保存下来的理由，这才需要执行这个操作。

那么，这里以Edge浏览器（基于Chromium，版本 116.0）为例子，展示对网页进行保存的方式。

注：实测不同网站的网页保存效果会有差距，应该是网站做了一些限制导致。

注：不建议保存网页内容后将网页的内容用于肆意传播，毕竟还涉及别人的知识产权。

在网页上点击鼠标右键。

1、点击“另存为”（当然，可以直接输入快捷键：Ctrl+S 实现另存为的效果）

此时可以看到有三种保存类型，等下会一一介绍这三种保存类型。

2、点击“打印”（当然，可以直接输入快捷键：Ctrl+P 实现另存为的效果）

注意选择“另存为PDF”，等下也会介绍这个保存方式。

介绍：仅生成一个网页文件，保留了网页中文字的内容，但是图片、Flash动画等全部没有保存，甚至有时还会排版丢失、布局错乱。

总结：如果网页里只有文本内容，无图片，或者图片不重要，则可以考虑使用这种方式进行保存。

实际使用：

这是打开后的样子：

介绍：把网页中全部元素保存在一个文件里，不额外生成单独的文件夹来保存图片等资源。

关于mhtml：（可参考相关材料：https://docs.fileformat.com/zh/web/mhtml/）

具有 MHTML 扩展名的文件代表一种网页存档格式，可以由许多不同的应用程序创建。该格式被称为存档格式，因为它将 web HTML 代码和相关资源保存在单个文件中。这些资源包括链接到网页的任何内容，例如图像、小程序、动画、音频文件等。 MHTML 文件可以在各种应用程序中打开，例如 Internet Explorer 和 Microsoft Word。 Microsoft Windows 使用 MHTML 文件格式记录在 Windows 上使用任何引发问题的应用程序期间观察到的问题场景。 MHTML 文件格式对页面内容进行编码，类似于 message/rfc822 中定义的规范，这是纯文本电子邮件相关规范。格式的实际规范由 RFC 2557 详细说明。

总结：它就是用于给网页存档（也就是我们此时想要做的离线保存）的一种文件格式。十分适合用于当下的需求场景，可以很好地保存整个网页的信息，用于在离线状态下进行打开。

特别地：实测发现可以很好地保存苹果的这个可交互的酷炫SVG效果。（网页地址：https://mp.weixin.qq.com/s/WhTd4T84iJIs2JeYdDvsSA）

特别地：其实还有一个用处，就是避免站点的种种限制，从而可以任意使用保存下来的网页中的内容

注意：所有的按钮之类的功能是无效的。此外，这种方式可以保存网页完整的动态特效，但无法保存网页的视频、音频信息（GIF可以正常保存显示）

注意：可能存在浏览器访问不兼容的问题

实际使用：

直接打开这个文件

介绍：会把网页的全部元素，例如文本、图片、Flash动画等全部保存下来，生成一个网页文件和一个与该网页文件同名的文件夹。文件夹里面保存了网页相关的图片、Flash动画等内容。

总结：存在多个文件不便于导入整理的问题，部分情况下会存在本地资源加载失败导致页面啥都没显示的问题。实测动态效果、gif图等都能很好地保存下来（毕竟这个方式也把对应的资源文件都保存下来了）

实际使用：

点击打开网页文件：

介绍：（Edge官网文档：https://support.microsoft.com/zh-cn/microsoft-edge/在-microsoft-edge-中打印-38f38d80-d55c-01a6-528d-467cdd8ada2d）

总结：无法保存动图，文章会因为PDF有页数的存在而被分页，观感不是很好。且实测很容易出现页面排版格式混乱的问题。

实际使用：（快捷键：Ctrl + P）

在浏览器中点击鼠标右键

点击“打印”

介绍：（Edge官网介绍：https://www.microsoft.com/zh-cn/edge/features/web-capture?form=MT00D8）

通过对整个页面或选定区域进行 Web 捕获，或使用 Microsoft Edge 中的 Web 选择直接复制 Web 内容及其格式，轻松使用 Web 内容。您可以添加注释并标记稍后使用笔或触摸拍摄的屏幕截图。

总结：需要以图片形式保存网页内容时可用，有点类似截图。不过其实不太适用于带gif等效果的网页。（还有一点就是，这个是浏览器本身的功能，支持所有站点上使用）

实际使用：

在浏览器内点击鼠标右键

点击“网页捕获”

捕获区域：就是选择一块区域进行捕获（类似QQ的截图），然后可以在上面涂鸦，然后作为图片导出粘贴或者保存到本地。

捕获整页：将整个网页保存成一张图片，然后可以在上面涂鸦，然后作为图片导出粘贴或者保存到本地。（其实这个就类似pdf的作用）

网页选择：单击并拖动（注意按住鼠标左键），可以任意选择网页的区域；相比于“捕获区域”，可以滚动选取（类似手机里的“滚动截图”）。这个不知道为啥，不能涂鸦

（注：篇幅有限，所以这里没有去详细介绍这些插件/工具，需要大家自行利用搜索引擎去了解使用）

浏览器插件：SingleFile

浏览器插件：FireShot，可以把网页保存为长图，支持保存为PDF文件（默认快捷键是Ctrl+Shift+Y，其中浏览器设置页、主页、附加组件页会受到保护，无法截图）

浏览器插件：Pinbox，一款跨平台的收藏工具，可以用它来记录灵感，稍后阅读，保存资料甚至网络上的任何内容（官网地址：https://withpinbox.com）

浏览器插件/全平台应用：Pocket：一个离线阅读服务软件，Pocket的主要功能就是将你要阅读或者一时没有读完的网页标记下来，接着同步到服务器端，然后就可以实行在不同的设备上阅读的功能，而且支持tag，颜值也高。重排版也比较美观。（官网地址：https://getpocket.com/zh-cn/）

Evernote：比较大而全，全平台，移动端离线的话似乎需要付费账号才可以。优点在于可以做笔记。适合保存，收藏，标注网页的需求（官网地址：https://evernote.com/features/webclipper）

Google keep：轻量级，劣势在于墙。

浏览器插件/全平台应用：Raindrop：适合做书签，可以存单个文章，也可以存网页。可以自动保存Twitter 或 Youtube 收藏夹。保存的每个网页和 PDF 的全部内容都是完全可搜索的（需要按年付费）。（官网地址：https://raindrop.io）