Downloading the content of a
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!

Upload it to the server - serve it back to the user as a ZIP. — Diodeus - James MacFarlane, Sep 26 '13 at 15:57
Hey, thanks, I've tweaked my question slightly. It seems i've missed a bit of key info out. It's getting the getting it to the server and back that's my issue. — abbas_arezoo, Sep 26 '13 at 16:01
The cheap way: copy the HTML to a hidden textarea and simply use a form-post. The nice way: use AJAX. — Diodeus - James MacFarlane, Sep 26 '13 at 16:02
If you only want to save the HTML, and don't want to worry about the server, look into saving a text file using html5, e.g. http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/ Your text to write would simply be body.innerHTML (or whatever element you want to work off of). — Scott Mermelstein, Sep 26 '13 at 16:03

score 10 · Answer 1 · answered Sep 26 '13 at 16:08

10

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/

answered Sep 26 '13 at 16:08

Yuriy Galanter

38,833
15
69
136

I like this method, but it doesn't seem to work for IE users. Would there happen to be a method around it you could recommend? – Huginn Oct 10 '16 at 16:02

Santosh Sawant · Answer 2 · 2017-10-25T08:25:54.927

IE dosen't support html5 'download' attribute, hence the above solution is not working on IE11. Please see below a workaround, taken from following stackoverflow question 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);
}

Please include the answer directly in your SO post. Links may be useful but they do not constitute a proper answer. — Maciej Jureczko, Oct 24 '17 at 12:36

Downloading the content of a
as a separate HTML file

2 Answers2

Linked

Downloading the content of a as a separate HTML file

2 Answers2

Linked

Downloading the content of a
as a separate HTML file