Greetings,
I’m working on a JS-based application that does some complex work and logs some information (actually, up to hundreds of lines) on a <div>.
My goal is to have a “Save log” button that triggers the browser’s download dialog to save the contents of my logging <div>.
More concisely, these are the requirements for this feature:
- The final user must have full control over the file. S/he should be able to save/archive it for future reference, mail it to the support department to get help addressing some issue, load it back into the app, etc. So HTML5’s Web Storage API doesn’t help here (data would get saved to a browser-defined location and wouldn’t be easily retrievable except from the JS that creates it).
- The application must be able to work offline (at least under some circumstances). That, and efficiency, is why I discarded the idea of POSTing the data to the server to get it back with a “Content-disposition” header.
- The file should be properly marked as
text/plain, so the browser can suggest default actions (like “Open on notepad”) just like with a normal file download. This can be seen as a specific aspect of the first requirement. - Telling the user to copy-paste the content of the
<div>into a text editor and saving it from there is definitely horrendous, and is exactly why I’m trying to avoid.
I have been searching on this site, on the WHATWG and W3C sites and on the web in general with no success. Is this doable at all?
The closest I have got is by using a data: url. My first attempt, performing a POST action, couldn’t get a content type through, so it’d fall-back to the UA’s heuristics. I got it slightly better by styling a <a> link to look like a button and giving it a type attribute, but then the UA will play too smart and render the content instead of saving (and asking the user to save the file from the browser at that step becomes even worse than taking the copy-paste approach, since page saving varies wildly between browsers).
If there were just some way to combine a data: url with a “content-disposition”-like hint, things could go really smooth.
Regards,
Herenvardo
Unfortunately this is not something you can do with normal browser capabilities. Something like flash or a browser-specific plugin will get you what you need, but security limitations within javascript will not let you download arbitrary data created within the browser.
Also the ‘data’ url is not supported across all browser/version combinations. I am not sure if your users are constrained on what browser they are using or not but that may limit what you can do with that solution.