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

我有一些代码可以将一些数据下载到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,Titlen';
            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>

为什么它在火狐中不起作用？

您正在创建一个元素并click调用元素，而不向DOM添加相同的元素。那是为什么它在FireFox不起作用.

我创建了一个隐藏的div <div id="container" style="display:none;"></div>并将您创建的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,Titlen';
            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>

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

我把

日志(console.log(a((放在document.createElement('a') Firefox和Chrome之后。我观察到在 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>

相关内容

最新更新

热门标签：