2016-11-18 6 views
-2

で動作FirefoxのJavaScript CSVファイルのダウンロードの問題に、私はクロームで素晴らしい作品が、Firefoxの(エラーなし)に何もしないCSVファイルにいくつかのデータをダウンロードするいくつかのコードを持っているクロム

ですコード:

<!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で動作しないのですか?

+0

私は、以下の作業コードを更新して試してみています。 – Aruna

答えて

1

あなたは要素を作成し、DOMに同じを追加することなく、 要素のclickイベントを呼び出しています。それは で、理由はFireFoxでは機能しません。

私は隠されたdivの<div id="container" style="display:none;"></div>を作成し、今CSVファイルをダウンロードするにはFireFoxを引き起こしているclickイベントをトリガしますが、このdivに作成したhiddenElementを追加。

私はFireFoxChromeでテストされ、両方の良い探している

:-)それです。

修正コード:

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

0

ポップアップブロッカーが得られていないことを確認してください。ユーザアクションの後に操作が遅れて実行されると、ブラウザのポップアップブロッカーが動作することがあります。

関連する問題