Question

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

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

但是，我正在推动我的技能组合的界限，并且正在寻求帮助以获取用户可以下载新填充的内容。我在这里学习，所以任何建议都不仅仅是值得赞赏的。

有人有什么想法吗？

谢谢！

Answer 1

您可以将锚点与“data：”架构一起使用，例如内容如

<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);
}

将<div>的内容下载为单独的HTML文件</div>

2 个答案: