我正在尝试将 Reddit 页面保存为单个 HTML 文件以供离线查看,与浏览器上显示的完全相同,并且已经手动扩展了一些评论线程。这个问题是如何在保留 CSS 效果和布局的同时将整个 Web DOM 保存为当前状态的一般问题的一部分。例如,Stack Exchange 平台上有大量帖子提出这个一般问题:
- 如何在 Chrome 中转储当前状态下的整个 Web DOM?
- 是否可以使用 JavaScript 转储 DOM 并保留 CSS 效果和布局?
- 如何在 Chrome 上保存带有图片的当前网页状态?
- 将当前网页保存为单个 html 文件格式
- 我可以使用 javascript 捕获并保存网页的当前状态吗
- 如何显示/保存当前网络浏览器显示的包括图片的 HTML?
- 如何获取网页的完美本地副本?
- 如何将 Web 应用程序保存为静态 HTML?
- 解释包含 JavaScript 的网站后保存它
- 如何保存网页而不触发重新加载或重新执行 JS?
- 如何完整下载网页并保留其功能?[重复]
几乎所有答案都属于以下形式之一:
右键单击并选择
Save as...
,然后另存为Web Page, Complete (*.htm;*.html)
或Web page, Single File (*.mhtml)
。打开 Chrome DevTools 并从选项卡中复制整个 HTML(
Copy outerHTML
)Elements
。由于许多链接都是“相对”链接,并且许多指向外部脚本的链接可以包含在 CSS 和 JS 文件中,因此您永远无法保存与实时网站版本完全相同的文件。
使用 HTTrack 之类的工具。(但据我所知,HTTrack 不支持将所有内容保存在单个 HTML 文件中。)
对于许多网站来说,将网页保存为单个 HTML 文件,使其与实时渲染时呈现给用户完全相同,这根本是不可能的。
使用浏览器扩展,例如“单个文件”(开发者的 GitHub 页面在这里)、“保存页面 WE ”,或“ WebScrapBook ”。
尝试“ WebRecorder ”Chrome扩展程序。
这些答案中的几个确实在某种程度上实现了将网页布局保存为单个 HTML 文件,与实时呈现时完全相同,但有一个巨大的缺点:它们没有以允许用户离线查看页面的方式保存 HTML 文件。离线查看部分本质上是我所追求的,也是我的问题的关键。
例如,打开 Chrome DevTools 并outerHTML
从Elements
选项卡中保存整个页面确实允许用户保存页面,使其与实时呈现时完全相同,但一旦用户尝试在离线模式下打开 HTML 文件,任何外部脚本都无法加载,因此 Reddit 页面的整个评论部分实际上甚至不会显示。我对 HTML 文件本身进行了一些手动检查,发现评论本身实际上存在于 HTML 文件中,但它们在用户加载文件时不会呈现,因为它们依赖外部脚本来指示如何向用户显示。
一个解决方案(几乎......)
根据我的经验,我发现使用 SingleFile chrome 扩展程序完全可以完成我想要的任务(几乎),而且它做得最好。它能够精确地保存页面,就像在实时渲染期间用户看到的那样(即使在离线查看时),我发现它比“Save Page WE”和“WebScrapBook”扩展程序都好。SingleFile 可以完美地处理许多网站,但在尝试保存包含大量评论线程的Reddit 页面时,它会惨遭失败。在这种情况下,扩展程序会消耗太多内存,并导致选项卡崩溃(Out of Memory
出现错误)。可悲的是,该扩展程序在评论部分非常小的 Reddit 帖子上运行良好,但讽刺的是,大多数时候,当我想保存 Reddit 帖子时,Reddit 帖子的评论部分非常大,因此 SingleFile 扩展程序无法处理它。
SingleFile 开发人员在他的GitHub 页面上提供了该工具的命令行版本,但这只是启动无头浏览器并下载请求的 URL。这种方法对我而言毫无用处,因为我想保存 Reddit 页面以及我个人手动进行的修改(即手动展开所需的评论线程)。此外,我在使用这种方法时也遇到了同样的内存不足问题。
肮脏的解决办法
我发现解决我的问题的一个非常不明智的方法是简单地将页面保存为 PDF 格式,但我不需要 PDF 格式。我想要 HTML 格式。
关于如何保存 Reddit 页面以供离线查看,即使在评论部分相当大的情况下,有什么想法吗?
TL;DR使用WebScrapBook ≥ 2.12.0并带有选项:NOT
Style images: Save used
、NOTFonts: Save used
、NOTScripts: Save/Link
。(免责声明:我是 WebScrapBook 的开发者)SingleFile 或许多其他类似工具在捕获过程中内存/卷消耗过多的根本原因是 Reddit 页面大量使用带有共享构造样式表的影子 DOM,这两者都是现代脚本驱动的技术,相关内容无法直接用 HTML 表达。
以我最近使用 Chrome 126 / Firefox 129 中的 WebScrapBook 2.12.0 为OP 提供的页面所做的示例为例,该页面已向下滚动并点击了 20 次“查看更多评论”,然后才调用捕获:
保存的页面大小为 79.1MB,包含 1987 条评论,每条评论有大约 29 个影子 DOM,每个影子 DOM 都引用了多个共享构造样式表。具体来说,大约有 6 个影子 DOM 引用了一个大约 200KB 的大型共享构造样式表。
SingleFiles 存储构造样式表的方式是在绑定文档或影子根中生成相应的 STYLE 元素。因此,多个影子 DOM 引用的构造样式表会被一遍又一遍地复制。
在这种情况下,此页面中重复构建的大型样式表的估计体积为 1987 * 6 * 200 ≈ 2.3GB!这还不包括 HTML 内容和其他次要样式表!这就是为什么很容易触发“内存不足”问题的原因。
WebScrapBook 2.12.0 重新制定了处理构造样式表的策略,以便它们不再在每个引用的影子 DOM 之间重复。
尽管如此,捕获过程中的某些计算可能会很复杂。对于 WebScrapBook 来说,
Style images: Save used
和Fonts: Save used
(SingleFile 可能有类似的功能/选项)必须针对每个引用的影子 DOM 检查大量 CSS 规则,以确保图像/字体是否真正被使用。在最终集成到最终页面文件之前,每次运行都会生成中间关系映射,并不断消耗内存。这也可能在捕获过程中耗尽 CPU/内存,因此应避免使用此类选项。他们使用的是典型的“懒惰加载器”。
因此,您必须加载它才能保存它。
滚动并加载,直到没有更多内容可加载。不要向上滚动。
然后你可以:
另存为
my-saved-post.html
。使用浏览器打开。
如果不加载所有外部组件,布局会有多糟糕?
通常不会太糟糕。现在您将看到每篇文章。
根据需要清理 HTML。现在您已将其
.html
格式化您将拥有除加载器内容之外的所有内容。
我查看了该图片,发现它是一个 2.2mb 的
.html
文件?!您可能有延迟加载程序内容。您只是没有任何服务器端功能。你应该尝试使用Five-Server运行该页面。安装完成后,将其重命名
data.html
为index.html
。然后,在该目录中打开终端并输入:five-server
。我可能对您的肮脏解决方法 PDF 文件有一个想法。我认为 Ubuntu 的存储库中有它。以下链接是 Fedora 和 FreeBSD 版本。如果愿意,您也可以从 Poppler 获取源代码。
pdftohtml版本 24.02.0
版权所有 2005-2024 The Poppler Developers - http://poppler.freedesktop.org
它表现不错。我在文本 PDF 文件上测试了它。输出如下: