4

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!

Improve this question
5
  • 1
    Upload it to the server - serve it back to the user as a ZIP. Commented Sep 26, 2013 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. Commented Sep 26, 2013 at 16:01
  • The cheap way: copy the HTML to a hidden textarea and simply use a form-post. The nice way: use AJAX. Commented Sep 26, 2013 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. thiscouldbebetter.wordpress.com/2012/12/18/… Your text to write would simply be body.innerHTML (or whatever element you want to work off of). Commented Sep 26, 2013 at 16:03
  • Nice work, thanks I'll check it out. Commented Sep 26, 2013 at 16:04

2 Answers 2

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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?
0

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); }
Improve this answer

1 Comment

Please include the answer directly in your SO post. Links may be useful but they do not constitute a proper answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.