jquery - 下载一个内容作为单独的 HTML 文件

Question

我目前正在构建一个拖放模板构建器，允许用户选择预填充的内容并在浏览器窗口中对其进行排序。然后我希望用户能够将新填充的内容作为单独的 HTML/Zip 文件。

它类似于 MailChimp 模板构建器中使用的功能。

但是，我正在突破我的技能集的界限，并且正在寻求帮助以获取可供用户下载的新填充内容。我是来学习的，所以任何建议都将不胜感激。

有人有什么想法吗？

谢谢！

Answer 1

您可以将锚点与“数据：”模式一起使用，例如使用类似的内容

<div id="content">
    <h1>Hello world</h1>
    <i>Hi everybody</i>
</div>

你可以使用脚本：

var a = document.body.appendChild(
        document.createElement("a")
    );
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML;
a.innerHTML = "[Export conent]";

要将 DIV 内容导出到文件中：http: //jsfiddle.net/BHeMz/

Answer 2

IE 不支持 html5 的“下载”属性，因此上述解决方案不适用于 IE11。请参阅下面的解决方法，取自以下 stackoverflow 问题 https://stackoverflow.com/a/39977048/3300541

if (navigator.msSaveBlob) { // IE
    navigator.msSaveBlob(new Blob([content], { type: 'text/html;charset=utf-8;' }), fileName);
} else {
    var download_link = document.createElement('a');
    download_link.href = 'data:text/html;charset=utf-8,' + encodeURIComponent(content);;
    download_link.download = fileName;
    document.body.appendChild(download_link);
    download_link.click();
    document.body.removeChild(download_link);
}