下载 <div> 的内容作为单独的 HTML 文件 [英] Downloading the content of a <div> as a separate HTML file

问题描述

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

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

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

有人有什么想法吗?

谢谢！

解决方案

您可以使用带有data:"模式的锚点，例如内容像

<h1>你好世界</h1><i>大家好</i>

你可以使用脚本:

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

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

I'm currently building a drag and drop template builder, allowing the user to select pre-populated content and order this inside a within the browser window. I would then like the user to be able the newly populated as a seperate HTML/Zip file.

It's similar to the functionality used in the MailChimp template builder.

However, I'm pushing the boundaries of my skillset and am looking for help in getting the content of the new populated available to be downloaded by the user. I'm here to learn so any advice would be more than appreciated.

Does anybody have any ideas?

Thanks!

解决方案

You can use anchor with "data:" schema, e.g. with content like

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

you can use script:

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]";

To export DIV content into a file: http://jsfiddle.net/BHeMz/

这篇关于下载 <div> 的内容作为单独的 HTML 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！