Downloading the content of a <div> as a separate HTML file
我目前正在构建一个拖放模板构建器,允许用户选择预先填充的内容并在浏览器窗口中对其进行排序。然后我希望用户能够将新填充为单独的 HTML/Zip 文件。
它类似于 MailChimp 模板生成器中使用的功能。
但是,我正在突破我的技能范围,并寻求帮助以获取可供用户下载的新填充内容。我是来学习的,所以任何建议都将不胜感激。
有人有什么想法吗?
谢谢!
您可以将锚点与 "data:" 架构一起使用,例如内容如
1 2 | Hello world Hi everybody |
你可以使用脚本:
1 2 3 4 5 6 | 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/
IE 不支持 html5 的 \\'download\\' 属性,因此上述解决方案不适用于 IE11。请参阅下面的解决方法,取自以下 stackoverflow 问题
https://stackoverflow.com/a/39977048/3300541
1 2 3 4 5 6 7 8 9 10 | 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); } |