1

I want to download a HTML file on click of a span.

I am not using any anchor tag in this. I want to do this on simple click of a span.

Url is having .html extension. And the url to html file is on another domain(Amazon s3)

How to achieve this in JavaScript, as in anchor tag it would have been easy where I would have written attribute 'download' in it.

Mitz
  • 561
  • 8
  • 21
Mozak
  • 2,738
  • 4
  • 30
  • 49

4 Answers4

2

This is actually a matter of setting the current location of the page to data:text/attachment in Firefox. In Chrome, it seems like setting the location won't trigger a file download. Below is my proposition that lets you specify the filename and also the part of the website you want to download as HTML (with indentation preserved).

function toBase64 (str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}

function triggerDownload () {
  var html = 'data:text/attachment;base64,' + toBase64(document.querySelector('html').innerHTML);
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'file.html');
  a.setAttribute('href', html);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

document.querySelector('span').addEventListener('click', function () {
  triggerDownload();
});
span {
  color: green;
  cursor: pointer;
}
<h1>Click <span>here</span> to download</h1>

From How to download the current page as a file / attachment using Javascript? you can see other examples, where it is also possible to download a determined part of the page, etc. (ps: the snippet won't run from within the iframe that Stack Overflow adds).

Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
Ciro Costa
  • 2,455
  • 22
  • 25
  • Using this code open a page(in same tab) with url like below data:text/attachment;base64,aHR0cDovL3BheXRtcHVibGljLnMzLWwLXNvdXRoZWFzdC0xLmFtYXpvbmF3cy5jb20vbWVyY2hhbnRfdG5jLzQvbWVyY2hhbnRfNF8xLjIzXzE0MjE5MTk1Mzk3MjJfc2lnbmVkLmh0bWw= and only url as text is displayed in the screen – Mozak Jan 22 '15 at 11:37
  • hmm, that's true. It's working fine for FF (37) but not for Chrome (at least here in chrome 41). I'll check it – Ciro Costa Jan 22 '15 at 11:49
  • 1
    just updated following http://muaz-khan.blogspot.in/2012/10/save-files-on-disk-using-javascript-or.html but with the possibility of grabbing any part of the website – Ciro Costa Jan 22 '15 at 12:14
  • methods mentioned in the blogs helps in achieving my requirement – Mozak Jan 22 '15 at 12:15
  • That's great! Also, regarding document.createElement and GC (for curiosity): http://stackoverflow.com/questions/1847220/javascript-document-createelement-delete-domelement (i was wondering about if we could create a mess with a bunch of HTMLElements being created) – Ciro Costa Jan 22 '15 at 12:18
0

Thanks for the answers and comments.

I am now able to download the file, however by violating the prerequisite of the question(i.e. anchor tag usage)

I followed this. The methods below in the link does the job

function SaveToDisk(fileUrl, fileName) {
    var hyperlink = document.createElement('a');
    hyperlink.href = fileUrl;
    hyperlink.target = '_blank';
    hyperlink.download = fileName || fileUrl;

    var mouseEvent = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
    });

    hyperlink.dispatchEvent(mouseEvent);
    (window.URL || window.webkitURL).revokeObjectURL(hyperlink.href);
}

However I now need to destroy the anchor tag created after downloading the link.

Mozak
  • 2,738
  • 4
  • 30
  • 49
0

You are trying to make a cross domain request. In order to do that you will have to enable cross-origin resource sharing (CORS). Fortunately S3 supports the CORS request. You need to enable it by adding the CORS configuration.

See the AWS article on How Do I Enable CORS on My Bucket?

Download file with AJAX in browser

function download() {
$.ajax({
url: "https://s3.amazonaws.com/123d_test/yourHtmlFile.html",
type: "GET",
dataType: "text",
success: function (data, textStatus,jqXHR)
    { alert(data.toString()); console.log(data);},
error: function (data, textStatus, jqXHR)
    {alert("error"); console.log(textStatus);}
    });
    }

Source

Mitz
  • 561
  • 8
  • 21
-1

If you are using HTML5 you can use the download attribute:

<a href="something.html" download="something.html">Download</a>
uhs
  • 838
  • 1
  • 7
  • 21