FireFox中的Javascript CSV文件下载问题，可在Chrome中使用

Question

我有一些代码可以将一些数据下载到一个csv文件中，该文件在chrome上效果很好，但是在Firefox上却什么也没做（没有错误）

这是代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" src="http://code.jquery.com/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>

为什么在Firefox中不起作用？

Answer 1

您正在创建一个元素并调用该元素的click事件，而没有将其添加到DOM 。 这就是为什么它不能在FireFox工作的原因。

我创建了一个隐藏的div <div id="container" style="display:none;"></div> ， hiddenElement您创建的hiddenElement附加到此div然后触发click事件，这现在导致FireFox下载csv。

而已：-）

我在FireFox和Chrome进行了测试，两者看起来都不错。

修改后的代码：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="http://code.jquery.com/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>

Answer 2

确保没有弹出窗口阻止程序。 有时，如果在用户操作之后执行操作较晚，则浏览器的弹出窗口阻止程序将起作用。

Answer 3

我已经将日志（console.log（a））放在了firefox和Chrome的document.createElement('a')之后。 我发现在chrome中会自动添加结束标记，而在Firefox中不会，因此您可以创建具有隐藏属性的定位标记，并在JS中引用它。 它应该工作。 范例：

<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>

FireFox中的Javascript CSV文件下载问题，可在Chrome中使用

问题描述

3 个解决方案

解决方案1
8 已采纳 2016-11-18 11:42:44

解决方案2
0 2016-11-18 11:37:23

解决方案3
0 2018-12-20 07:36:55

FireFox中的Javascript CSV文件下载问题，可在Chrome中使用

问题描述

3 个解决方案

解决方案1 8 已采纳 2016-11-18 11:42:44

解决方案2 0 2016-11-18 11:37:23

解决方案3 0 2018-12-20 07:36:55

解决方案1
8 已采纳 2016-11-18 11:42:44

解决方案2
0 2016-11-18 11:37:23

解决方案3
0 2018-12-20 07:36:55