Download
content as html on firefox

Question

I have a javascript that saves the contents of a <div> as html on click, which works just fine on chrome, but doesn't on firefox.

Please help me write a cross browser solution.

Here's my code:

$(window).load(function(){

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}

var fileName =  'invo.html';

$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'Invoice','text/html');
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Invoice">
  CONTENT GOES HERE
</div>
<a href="#" onclick="return false;" id="downloadLink">Download</a>

What does it do on Firefox? Is there an error? Have you done research into if what you're doing is compatible? — L_Church, May 21 '18 at 11:48
It does nothing. The code seems to be completely incompatible with firefox. — Cody Coderson, May 21 '18 at 11:50
may b you can use JsPDF https://stackoverflow.com/questions/17293135/download-a-div-in-a-html-page-as-pdf-using-javascript — Dhaval Pankhaniya, May 21 '18 at 12:00

myf · Accepted Answer · 2018-05-21T12:03:41.327

Apparently, simply adding the temporal link to document fixes the issue in Firefox; presumably Firefox doesn't like clicking elements that are not "in the page":

$(window).load(function(){

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

var fileName =  'invo.html';

$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'Invoice','text/html');
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Invoice">
  CONTENT GOES HERE
</div>
<a href="#" onclick="return false;" id="downloadLink">Download</a>

Btw, in this case, you could re-use the original "button" link to hold the download and href, what will save you from otherwise unnecessary DOM alterations:

$(window).load(function(){

function downloadInnerHtml(filename, elId, mimeType, link) {
    var elHtml = document.getElementById(elId).innerHTML;
    mimeType = mimeType || 'text/plain';
    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
}

var fileName =  'invo.html';

$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'Invoice','text/html', this);
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Invoice">
  CONTENT GOES HERE
</div>
<a href="#" id="downloadLink">Download</a>

Download content as html on firefox

1 Answers1

Download
content as html on firefox