下载当前的HTML文件。

Question

如何让用户下载当前的HTML页面？该网页使用ajax加载文本，因此我的代码无法正常工作，因为它下载的是页面的原始状态：

<a href="URL_OF_THIS_PAGE" download="page.html">Download</a>

- Iter Ator

Answer 1

<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download</a>

如何操作：

• 我们创建了一个HTML锚点元素，并添加了一个onclick处理程序。当单击锚点标签（“Download”）时，将运行该处理程序。
• 锚点标签具有download属性，其值设置为page.html。这告诉浏览器下载锚点标签的href属性所指向的内容，并将其命名为page.html，而不是默认的访问链接的行为。
• 在处理程序内部，JavaScript的this.href=更改标记的href属性。这是单击事件到达锚点标签本身之前，在单击处理程序上发生的。
• 锚点标签的href属性通常包含指向某个地方的URL。在这里，我们将href设置为指向内联值。我们使用字符串的第一部分告诉浏览器这是什么类型的值：'data:text/html;charset=UTF-8,'。这告诉浏览器，接下来的文本将是一个具有UTF-8字符集编码的text/html文档。
• 最后，将当前文档的整个源代码作为字符串获取并附加为内联文档的值，使用encodeURIComponent(document.documentElement.outerHTML)。因此，href属性现在指向HTML文档本身的内联字符串表示形式。

总结一下：单击锚点标签时，单击处理程序运行并将整个文档插入为可下载的内联文件，该文件名为“page.html”，当单击事件冒泡到锚点标签本身时，该文件将被下载。

- lujjjh

---

可以描述一下你做了什么吗？另外，我应该在浏览器控制台中输入哪个命令来下载当前页面？请回复。 - sony

请注意，任何 blob（即 <audio> 或 <video> 等媒体文件）可能无法以可重放的方式保存 - 将以以下方式保存：src="blob:localhost:8000/246a5b69-eff7-4c94-a572-9a969b24f6e5"，当您尝试回放时会出现 "Not allowed to load local resource" 的错误。如果您使用 window.URL.createObjectUrl(...)，这是预期的，因为 URL 生命周期与原始文档相关联。 - Nate Anderson

@sony 在控制台上运行此代码：a.download = "page.html"; a.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML); document.body.appendChild(a); a.click(); document.body.removeChild(a); - Chris McCormick