CSV文件下載的問題，工作在Chrome

-2

我有一些代碼會下載一些數據到一個CSV文件，該文件對鉻的偉大工程，但在Firefox上不會做任何事情（沒有錯誤）CSV文件下載的問題，工作在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'; 
      hiddenElement.click(); 
     } 

    </script> 

    <button onclick="download_csv()">Download CSV</button> 

</body> 
</html>

爲什麼它不工作在Firefox？

來源

2016-11-18 Markcce Eros

我在下面更新的工作代碼，並給予一試。 – Aruna

你正在創建一個元素，並調用click事件元素的無添加相同的DOM。那是爲什麼它不在FireFox中工作。

我創建了一個隱藏的div <div id="container" style="display:none;"></div>和附加您創建的這個div的hiddenElement然後觸發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>

來源

2016-11-18 11:42:44 Aruna

確保你沒有得到一個彈出窗口攔截器。有時，如果在用戶操作後執行操作，則瀏覽器的彈出窗口阻止程序開始生效。

來源

2016-11-18 11:37:23

CSV文件下載的問題，工作在Chrome

回答

相關問題