最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin4浏览0评论

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
Add a ment  | 

3 Answers 3

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>
发布评论

评论列表(0)

  1. 暂无评论