我正在尝试将 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 页面以供离线查看,即使在评论部分相当大的情况下,有什么想法吗?