Downloading the content of a <div> as a separate HTML file

Question

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!

Answer 1

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/