将的内容作为单独的HTML文件下载

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

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

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

有人有什么想法吗？

谢谢！

Answer 1

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

 
Hello world
 Hi everybody  

你可以使用脚本：

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