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。那＆＃39; S 为什么它不能在FireFox中工作。

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

它是： - ）

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

修改后的代码：

＆＃13;

Chrome

＆＃13;

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 个答案: