CODEWITHSUNDEEP
javascripthtmlamazon-s3
Mozak
Mozak

Reputation: 2798

Download a html file on click of span

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.

Upvotes: 1

Views: 6657

Answers (4)

Ciro Costa
Ciro Costa

Reputation: 2585

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).

Upvotes: 2

Mitz
Mitz

Reputation: 561

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

Upvotes: 0

Mozak
Mozak

Reputation: 2798

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.

Upvotes: 0

uhs
uhs

Reputation: 848

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

<a href="something.html" download="something.html">Download</a>

Upvotes: -1

Related Questions