I have some code which downloads some data into a csv file which works great on chrome but doesn't do anything on firefox (no errors)
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src=".min.js"></script>
</head>
<body>
<script>
var data = [
['idea', 'a very good one'],
['beer', 'not when driving'],
['guitar', 'yes please']
];
function download_csv() {
var csv = 'Name,Title\n';
data.forEach(function(row) {
csv += row.join(',');
csv += "\n";
});
console.log(csv);
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'test.csv';
hiddenElement.click();
}
</script>
<button onclick="download_csv()">Download CSV</button>
</body>
</html>
Why is it not working in firefox?
I have some code which downloads some data into a csv file which works great on chrome but doesn't do anything on firefox (no errors)
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>
</head>
<body>
<script>
var data = [
['idea', 'a very good one'],
['beer', 'not when driving'],
['guitar', 'yes please']
];
function download_csv() {
var csv = 'Name,Title\n';
data.forEach(function(row) {
csv += row.join(',');
csv += "\n";
});
console.log(csv);
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'test.csv';
hiddenElement.click();
}
</script>
<button onclick="download_csv()">Download CSV</button>
</body>
</html>
Why is it not working in firefox?
Share Improve this question edited Nov 26, 2016 at 13:04 Aruna 12k3 gold badges30 silver badges42 bronze badges asked Nov 18, 2016 at 11:27 user7038798user7038798 1- I have updated the working code below and give a try. – Aruna Commented Nov 18, 2016 at 11:44
3 Answers
Reset to default 9You are creating an element and invoking the
clickevent of the element without adding the same to theDOM. That's why it's not working inFireFox.
I created a hidden div <div id="container" style="display:none;"></div> and appended the hiddenElement you created to this div then trigger the click event which is now causing FireFox to download the csv.
That's it :-)
I tested in FireFox and Chrome and both are looking good.
Modified code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>
</head>
<body>
<script>
var data = [
['idea', 'a very good one'],
['beer', 'not when driving'],
['guitar', 'yes please']
];
function download_csv() {
var csv = 'Name,Title\n';
data.forEach(function(row) {
csv += row.join(',');
csv += "\n";
});
console.log(csv);
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'test.csv';
document.getElementById('container').appendChild(hiddenElement);
hiddenElement.click();
}
</script>
<button onclick="download_csv()">Download CSV</button>
<div id="container" style="display:none;"></div>
</body>
</html>Make sure you are not getting a popup blocker. Sometime if operation is performed late after user action then popup blocker of browser es into action.
I had put the log (console.log(a)) after document.createElement('a') both firefox and Chrome. i observe that in chrome automatically adding closing tag but not in Firefox, So you can create anchor tag with hidden property and refer that in your JS. It Should work.
Exmaple:
<div id="report_wraper">
<table> some rows and col ....</table>
</div>
<button id="d">Export csv</button>
<a style="display:none" id="dtag"></a>
<script type="text/javascript">
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById('report_wrapper');
var table_html = encodeURI(table_div.outerHTML); // your table div
var a = document.getElementById("dtag");
a.href = data_type + ", " + table_html;
a.download = "report"+ new Date()+ ".xls";
a.click();
</script>