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

Answer 1

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