FireFox中的Javascript CSV文件下载问题，在Chrome中工作_Javascript

FireFox中的Javascript CSV文件下载问题，在Chrome中工作

javascript

FireFox中的Javascript CSV文件下载问题，在Chrome中工作,javascript,Javascript,我有一些代码可以将一些数据下载到csv文件中，这在chrome上非常有效，但在firefox上什么都不做没有错误代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-lates

我有一些代码可以将一些数据下载到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中不起作用？

确保您没有收到弹出窗口阻止程序。有时，如果操作在用户操作后延迟执行，则浏览器的弹出窗口阻止程序将启动。

确保您没有收到弹出窗口阻止程序。有时，如果操作在用户操作之后执行得很晚，那么浏览器的弹出窗口拦截器就会起作用

您正在创建一个元素并调用元素，而不将其添加到DOM中。那是为什么它在FireFox中不起作用

我创建了一个隐藏的div，并将您创建的hiddenElement附加到这个div中，然后触发click事件，现在导致FireFox下载csv

就是这样：-

我在FireFox和Chrome上进行了测试，结果都不错

修改代码：

风险值数据=[ [“想法”，“非常好”]， [“啤酒”，“开车时不喝”]， [“吉他”，“是的，请”] ]; 函数下载{ var csv='Name，Title\n'； data.forEachfunctionrow{ csv+=行。连接'，'； csv+=\n； }; console.logcsv； var hiddenElement=document.createElement'a'； hiddenElement.href='数据：文本/csv；字符集=utf-8'，+encodeURIcsv； hiddenElement.target='_blank'； hiddenElement.download='test.csv'； document.getElementById'container'.appendChildhiddenElement； hiddenElement.click； } 下载CSV 您正在创建一个元素并调用元素，而不将其添加到DOM中。那是为什么它在FireFox中不起作用

我创建了一个隐藏的div，并将您创建的hiddenElement附加到这个div中，然后触发click事件，现在导致FireFox下载csv

就是这样：-

我在FireFox和Chrome上进行了测试，结果都不错

修改代码：

我把log console.loga放在document.createElement'a之后，firefox和Chrome都是这样。我注意到在chrome中会自动添加结束标记，但在Firefox中不会，所以您可以创建带有隐藏属性的锚标记，并在JS中引用它。它应该会起作用。 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>