介绍

将一个完整的页面保存到单个 HTML 文件中，包括 CSS、图片，类似 MHTML。

下面两个网站简单介绍了一下扩展：

引言

“在游戏开发、实时渲染以及计算机图形学领域，《Real-Time Rendering》系列书籍一直备受推崇。有人说，它是实时渲染的圣经。也有人说，它是绝世武功的目录。”

众所周知，《Real-Time Rendering》之所以是“绝世武功的目录”，除了其精炼、综述式的行文方式，百科大全般的知识体系广度之外，主要在于其引用的丰富而事无巨细的参考文献。这些包含了详细技术细节的参考文献，才是“绝世武功秘籍的本体”所在。

时间来到2018年，《Real-Time Rendering》系列的第四版《Real-Time Rendering 4th》的参考文献的数量已经超过了2000条之多。这些参考文献散落于互联网各地，如果你有查阅过RTR4官网上放出的参考文献的链接（Real-Time Rendering Bibliography - 4th Edition），你会发现其中有不少链接已经失效。如果没有做及时的备份，且对应的文献没有其他提供源，则这些文献会面临着永久失传的风险。

所幸，本人在阅读以及翻译《Real-Time Rendering 4th》期间，花了不少业余时间，几乎详细地完全收集整理了《Real-Time Rendering 4th》2000多条的参考文献，将不少已经失效绝版的参考文献，提前备份保存了下来，构成了具有收藏价值的“绝世武功秘籍的本体”—— RTR4 2000多篇参考文献的典藏合集。

这里引用的引言完全说明了保存网页的痛点。

存档的意义

有很多因素会导致网页消失或变化：

  1. 网站作者不维护了，域名、VPS 等等到期
  2. 网页内容由于各种不可抗力因素删除
  3. 网站域名发生变化，如 unity3d.com 变成 unity.com
  4. 网站 URL 结构发生变化，如 blog.unity3d.com 每篇文章的 URL 中都包含日期，新版本中完全去除了
  5. 网页内容会发生变化，导致当时引用的内容与现在的不一致

因此某些重要信息，需要进行采集并存档，方便后续使用。

存档的需求

  • 保存网页完整的样式，忠实地还原网页原始外观。
  • 最好保存为单个文件，方便存档、备份与分享。
  • 兼容性，可以使用各种平台下的各种软件打开。

文件格式比较

方式/特点 HTML SingleFile MHTML PDF打印 Markdown 截图 印象笔记 剪藏
软件兼容性 好，浏览器都可以打开 中，只有 Chrome 系与 IE 可以打开 好，PDF 阅读器都可以打开 中，需要用户安装支持 Markdown 的文本编辑器 好，所有系统都可以显示图片 差，只能在印象笔记中使用
样式 好，完整保留 好，几乎完整保留样式，除了个别地方有显示异常 1 中，使用了为打印准备的样式 差，会丢失很多样式与效果 好，完整保留 中，不管是完整收藏还是简洁模式都会丢失很多样式与效果
保存方式 单个 html 文件 单个 mhtml 文件 单个 PDF 文件 一个 Markdown 文件或者额外增加一大堆图片文件（如果保存图片的话） 一个图片文件 印象笔记中的一篇笔记
是否分页 否 否 是，分页会导致页面显示错乱 否 否 否

总结

总体而言，HTML 格式的兼容性最好，各大厂商的浏览器都可以正常打开显示。并且使用 SingleFile 会将图片样式等都保存在同一个 HTML 中，极大地降低了存档的文件数量。

并且 SingleFile 可以像 PDF 一样忠实地还原网页样式，同时又没有 MHTML 的兼容性问题，几乎是完美的工具。

扩展使用

这个插件还有其他的功能，我做了一张简单的翻译对照图，其中有两个我觉得比较实用的功能，一个是为网页内容添加标注，标注可以当成是边看内容边做笔记；一个是批量保存网页内容。

选择上方的第二个选项「Annotate and save the page」，会打开一个新的标签页供你添加标注，页面左上角展示了添加标注可以用到的工具：一个是添加笔记，形式如下图的蓝色的便利贴，输入你想记录的内容，另一个是修剪工具，它可以去除页面中的任意元素，包含文本、图片，删繁就简，删掉你不想保存的内容。

更多保存方法

当然也推荐查找更多保存的方案，根据自己当前的需求选择最好的方案：

其他扩展

不推荐使用 SingleFileZ 这个扩展，默认只能在 Firefox and Microsoft Edge 上使用，想要在 Chrome 上使用需要开启一个额外选项，另外因为不完整的 Chrome 扩展 Manifest V3 API 会在 2023 年 1 月时停止工作。

  1. 实测 GitHub 仓库页面 SingleFile 保存的效果与原始页面一致，而 mhtml 出现了样式差异（Star 与 Fork 按钮）。 ↩︎