如何让用户下载当前的HTML页面?该网页使用ajax加载文本,因此我的代码无法正常工作,因为它下载的是页面的原始状态:
<a href="URL_OF_THIS_PAGE" download="page.html">Download</a>
如何让用户下载当前的HTML页面?该网页使用ajax加载文本,因此我的代码无法正常工作,因为它下载的是页面的原始状态:
<a href="URL_OF_THIS_PAGE" download="page.html">Download</a>
<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download</a>
如何操作:
onclick
处理程序。当单击锚点标签(“Download”)时,将运行该处理程序。download
属性,其值设置为page.html
。这告诉浏览器下载锚点标签的href
属性所指向的内容,并将其命名为page.html
,而不是默认的访问链接的行为。this.href=
更改标记的href
属性。这是单击事件到达锚点标签本身之前,在单击处理程序上发生的。href
属性通常包含指向某个地方的URL。在这里,我们将href
设置为指向内联值。我们使用字符串的第一部分告诉浏览器这是什么类型的值:'data:text/html;charset=UTF-8,'
。这告诉浏览器,接下来的文本将是一个具有UTF-8字符集编码的text/html
文档。encodeURIComponent(document.documentElement.outerHTML)
。因此,href
属性现在指向HTML文档本身的内联字符串表示形式。总结一下:单击锚点标签时,单击处理程序运行并将整个文档插入为可下载的内联文件,该文件名为“page.html”,当单击事件冒泡到锚点标签本身时,该文件将被下载。
<audio>
或<video>
等媒体文件)可能无法以可重放的方式保存 - 将以以下方式保存:src="blob:localhost:8000/246a5b69-eff7-4c94-a572-9a969b24f6e5"
,当您尝试回放时会出现 "Not allowed to load local resource" 的错误。如果您使用window.URL.createObjectUrl(...)
,这是预期的,因为 URL 生命周期与原始文档相关联。 - Nate Andersona.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