作为一名多年的后端开发工程师，我经常需要保存网页内容，比如技术文档、项目需求或解决方案。然而，传统的网页保存方式总是让我头疼：要么内容不完整，要么格式混乱，要么无法搜索。今天，我想和大家分享一个神奇的开源工具——SingleFile，它完美解决了这些问题，让网页保存变得简单而高效。

一、传统保存网页的痛点

1.1 打印为PDF

打印为 PDF:

弹出打印设置页面：

只能打印第一页，后面就是空白内容

保存看看：

保存的文件：

实际保存的，后面的页面是空白的

ChatGPT客户端，有提供导出pdf功能，但是聊天记录太长，点击没有反应。

1.2 保存为长图片

有些工具（如FireShot插件可以捕捉网页截图、桌面软件FSCapture可以滚动截图等）可以将网页保存为一张长图片，看似方便，但实际上非常不实用。图片无法进行文字搜索，阅读时需要不断缩放，而且占用大量存储空间。对于需要频繁查阅的资料来说，这种方式显然不够友好。

1.3 保存为MHTML

MHTML 是一种将网页及其资源打包为单个文件的格式，但它的兼容性较差。部分浏览器不支持保存或打开 MHTML 文件，而且对于动态生成的内容（如通过 JavaScript 加载的区域），MHTML 也无法完整保存。

二、SingleFile插件

2.1 SingleFile插件简介

SingleFile 是一个开源浏览器插件（也支持命令行工具），它的核心功能是：将整个网页保存为单个 HTML 文件。这个 HTML 文件包含了所有文字、图片、样式表甚至动态加载的内容，无需依赖网络即可离线浏览。

它的优势非常明显：

• 完整性：保存的网页与原页面几乎一模一样，包括动态内容和固定区域。
• 便携性：单个 HTML 文件易于存储、分享和管理。
• 高效性：一键操作，无需复杂设置。

2.2 SingleFile安装

安装方式：浏览器插件（推荐）、命令行工具。

SingleFile支持Edge、Chrome、Firefox等主流浏览器。可以在浏览器的应用商店中搜索 “SingleFile”，然后直接安装。插件下载：

对于喜欢命令行的用户，还可以通过 npm 安装：

npm install @singlefile/singlefile

2.3 SingleFile使用

先打开需要保存的网页，可以保存整个页面：

会产生一个遮罩层，顶部是进度，右下角是步骤显示：

生成完成：

网页将自动下载为一个 HTML 文件，保存：

用浏览器打开这个 HTML 文件，查看完整的网页内容，无需联网，打开：

保存选中部分：

开始：

保存的网页：

可以上传到OSS,方便保存和备份。

还可以用上传到服务器的nginx目录：

然后通过url访问：

三、总结

浏览器插件SingleFile真的很好用，对于知识管理，可以保存技术文档、博客文章或学习资料，方便后续查阅。还可以资料归档，将项目需求或设计稿保存为本地文件，避免因网页失效而丢失信息。还可以内容分享，将网页打包为单个文件，直接发送给同事或朋友。

SingleFile不仅解决了传统网页保存方式的痛点，还以其简单易用的特点赢得了我的青睐。如果你也经常需要保存网页，不妨试试，相信它会成为你的得力助手！

通过这篇文章，我希望你能了解到SingleFile的价值，并在实际工作中体验它带来的便利。如果你有更好的工具或使用技巧，欢迎在评论区分享交流！