Trigger a file download on click of button Javascript with contents from DOM

Question

I want to download a file which is created from DOM element. So a user clicks a button on web page and it invokes a javascript method which may grab the contents of DOM element and prompt user for download.

I am able to grab contents of the DOM element inside a Javascript Var. But not sure how to proceed further.

For grabbing the DOM element i am using:

var elem = document.getElementById("userDownload");

please provide what you have tried – Super Hornet Aug 01 '14 at 19:08 — Super Hornet, Aug 01 '14 at 19:08

score 12 · Answer 1 · answered Aug 01 '14 at 19:10

12

I am not sure if I understand correctly what is the content that you are trying to download. If you have the content (which sounds like the HTML of an element?) stored in a variable, you can try:

("#downloadbutton").click(function() {
  //var content = content of file;
  var dl = document.createElement('a');
  dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
  dl.setAttribute('download', 'filename.txt');
  dl.click();
});

answered Aug 01 '14 at 19:10

user3758133

228
4
13

Your snippet was helpful as a part of my complete solution. Thank you. Thing i was missing was inline event handlers were not working for me. I had to add a listner for them. Thank you. – CodeMonkey Aug 01 '14 at 21:51
No problem, glad to be of help. – user3758133 Aug 01 '14 at 21:53

score 5 · Answer 2 · answered Jan 19 '15 at 08:21

I appreciated finding this question, but at least on Firefox running with linux, you need to append the dl element to the document to get the click functionality to work. I haven't tested extensively on other browsers how necessary this is, but it is necessary on some at least, so I recommend the following modification:

var content = document.getElementById("elem").innerHTML;
var dl = document.createElement('a');
dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
dl.setAttribute('download', 'filename.txt');
// Set hidden so the element doesn't disrupt your page
dl.setAttribute('visibility', 'hidden');
dl.setAttribute('display', 'none');
// Append to page
document.body.appendChild(dl);
// Now you can trigger the click
dl.click();

score 2 · Answer 3 · answered Aug 01 '14 at 21:32

Figured it out: I had to do `

function myAlert(){
    var content = document.getElementById("elem").innerHTML;
    var dl = document.createElement('a');
    dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
    dl.setAttribute('download', 'filename.txt');
    dl.click();
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('alertButton').addEventListener('click', myAlert);
});

Trigger a file download on click of button Javascript with contents from DOM

3 Answers3

Linked