How to download the current page as a file / attachment using Javascript?

Question

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 a similar problem:

How can I use Javascript to download the current page (IE: the current DOM, or some sub-set of it) as a file?

I have a web page which fetches results from a non-deterministic query (eg. a random sample) to display to the user. I can already, via a querystring parameter, make the page return a file instead of rendering the page. I can add a "Get file version" button (our standard approach) but the results will be different to those displayed because it is a different run of the query.

Is there any way via Javascript to download the current page as a file, or is copying to the clipboard my only option?

EDIT An option suggested by Stefan Kendall and dj_segfault is to write the result server side for later retrieval. Good idea, but unfortunately writing files server side is out of the question in this instance.

How about shudder passing the innerHTML as a post parameter to another page?

Rajeshkumar Kandhasamy · Accepted Answer · 2012-12-24 08:03:32Z

18

You can try with the protocol data:text/attachment

Like in:

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

Edit after shesek comment

edited Dec 24, 2012 at 8:03

Rajeshkumar Kandhasamy

6,4997 gold badges61 silver badges84 bronze badges

answered Sep 1, 2011 at 14:26

Mic

25.2k9 gold badges61 silver badges71 bronze badges

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

12 Comments

shesek Over a year ago

No need for an iframe, he can simply document.location= to it

Mic Over a year ago

@shesek Learned something big today. Thanks!

Mic Over a year ago

@xan may be with a window.open and playing with the title, but you would get a new tab

xan Over a year ago

New tab would be fine, if not and advantage for this scenario.

Anand Rockzz Over a year ago

Not allowed to navigate top frame to data URL:

|

aendra · Accepted Answer · 2013-06-26 12:53:34Z

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
})();

function utf8_to_b64( str ) {
  return window.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:

shesek · Accepted Answer · 2011-09-01 14:25:31Z

2

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)

answered Sep 1, 2011 at 14:25

shesek

4,7001 gold badge30 silver badges27 bronze badges

1 Comment

Uri Barenholz Over a year ago

12 years after, an implementation of this is in my answer below :-)

dj_segfault · Accepted Answer · 2011-09-01 14:17:50Z

0

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.

answered Sep 1, 2011 at 14:17

dj_segfault

12.5k4 gold badges33 silver badges37 bronze badges

1 Comment

xan Over a year ago

This is what I feared. Writing server side files is, unfortunately, out of the question.

Stefan Kendall · Accepted Answer · 2011-09-01 14:19:00Z

0

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.

answered Sep 1, 2011 at 14:19

Stefan Kendall

68.2k69 gold badges259 silver badges409 bronze badges

1 Comment

xan Over a year ago

Writing server side files is, unfortunately, out of the question.

Uri Barenholz · Accepted Answer · 2023-10-23 08:51:15Z

This is an old question, but I had to deal with the same issue in 2023, and the solution here had two problems:

The downloaded file was truncated.
Inability to control the name and extension of the downloaded file.

As noted in some comments above, we now have the download attribute for a elements in html, which allows for specifying the filename. I first tried something like the following (Assuming the original filename is index.html; But read later so see the drawback of this solution):

html:

<a id="save" href="index.html" download="default_download_name.html">save</a>

css:

#save {display: none;}

js:

function save(){
  document.getElementById("save").click()
}

The problem with this solution is that it saves the original document, so if it includes any dynamic content, it will not be stored (and that was a requirement by the OP). To overcome this issue, one can do the (slightly less elegant, IMHO) following, still leveraging the download attribute, but mixing it with dynamically created data to download:

function save() {
  const data = "<!DOCTYPE html>\n"+document.documentElement.outerHTML; // See sources below for why this gets the entire page content.
  const link = document.createElement('a');
  link.setAttribute('download', 'default_download_name.html');
  link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
  link.click(); // In my tests, there was no need to add the element to the document for this to work.
}

Sources:

For getting the document content - here
For triggering a download with dynamic data: here

Collectives™ on Stack Overflow

How to download the current page as a file / attachment using Javascript?

6 Answers 6

12 Comments

Some useful links on Data URIs:

Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

12 Comments

Some useful links on Data URIs:

Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related