How To Download The Current Page As A File / Attachment Using Javascript?

September 16, 2024 Post a Comment

I am aware of the hidden iFrame trick as mentioned here (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) and in other answers. I am interested in

Solution 1:

You can try with the protocol data:text/attachment

Like in:

<html><head><style></style></head><body><divid="hello"><span>world</span></div><script>
(function(){
    document.location = 
        'data:text/attachment;,' + //here is the trickdocument.getElementById('hello').innerHTML;
            //document.documentElement.innerHTML; //To Download Entire Html Source
})();
</script></body></html>

Edit after shesek comment

Solution 2:

To add to Mic's terrific answer above, some additional points:

If you have Unicode content (Or want to preserve indentation in the source), you need to convert the string to Base64 and tell the Data URI to treat the data as such:

(function(){
    document.location = 
        'data:text/attachment;base64,' + // Notice the new "base64" bit!utf8_to_b64(document.getElementById('hello').innerHTML);
            //utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
})();

functionutf8_to_b64( str ) {
  returnwindow.btoa(unescape(encodeURIComponent( str )));
}

utf_to_b64() via MDN -- works in Chrome/FF.

You can drop this all into an anchor tag, allowing you to set the download attribute:

<a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html"id="generate">Generate static</a>

This will download the current page's HTML as index.html and removes the link used to generate the output. This assumes the utf8_to_b64() function from above is defined somewhere else.

Some useful links on Data URIs:

Solution 3:

Depending on the size and if support is needed for ancient browsers, but you can consider creating a dynamic file using data: URIs and link to it. I'be seen several places that do that. To get the brorwser to download rather than display it, play around with the content type you put in the URI and use the new html5 download attribute. (Sorry for any typos, I'm writing from my phone)

Solution 4:

I don't think you're going to be able to do it exactly the way you want to. JavaScript can't create a file and download it for security reasons. Nor can it create it on the server for download.

What I would do if I were you is, on the server side, create an output file with the session ID in the name in a temp directory as you create the output for the web page, and have a button on the web page with a link to that file.

You'll probably want a separate process to remove files over a day old or something like that.

Solution 5:

Can you not cache the query results, and store it by some key? That way you can reference the same report output forever, or until your file garbage collector comes along. This also implies that you can create static URLs to report outputs, which tends to be nice.

JavaScript Passion