JS下载HTML

在 Web 开发过程中，有时需要将一个网页或页面的一部分保存成HTML格式。JavaScript 提供了下载html的方法，我们可以利用它来实现这个功能。

方法

首先，我们需要定义一个函数来触发下载html的操作。该函数需要传入两个参数：要下载的内容和文件名。在函数内部，我们将创建一个 blob 对象，其数据是要下载的内容，并将其转换成 URL。然后，我们将创建一个 anchor 标签，将 blob URL 设置为其 href 属性，将要下载的文件名设置为其 download 属性，并通过模拟 click 事件来触发下载操作。

function downloadHtml(content, fileName) {
  const blob = new Blob([content], {type: 'text/html;charset=utf-8'});
  const href = URL.createObjectURL(blob);
  const anchor = document.createElement('a');
  anchor.href = href;
  anchor.download = fileName;
  anchor.click();
  URL.revokeObjectURL(href);
}

在调用 downloadHtml 函数时，我们需要将要下载的内容和文件名作为参数传递进去。以下是一个简单的例子，我们可以使用该函数下载一个 div 元素的内容。

const div = document.querySelector('div');
const content = div.outerHTML;
downloadHtml(content, 'example.html');

总结

通过 JavaScript 的 Blob 和 URL 对象，我们可以实现下载 html 的功能。此方法还可以应用于下载其他文本格式，例如文本文件和 CSV 文件。