Javascript CSV file download issue in FireFox, works in Chrome

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 user7038798

I have updated the working code below and give a try. – Aruna Commented Nov 18, 2016 at 11:44

Add a ment |

3 Answers 3

Sorted by: Reset to default 9

You are creating an element and invoking the click event of the element without adding the same to the DOM. That's why it's not working in FireFox.

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Javascript CSV file download issue in FireFox, works in Chrome - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)