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.
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).
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.
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?
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);} }); } 