私のcsvダウンロードボタンはChromeのみ動作します

Question

ボタンをクリックしたときにCSVファイルをダウンロードする必要があるプロジェクトで作業しています。ダウンロードはChromeのみで動作します。

Safariでは、ダウンロードする代わりに、csvファイルを開くことにも注意してください（例：Edge、Firefox、Safariなど）。新しいタブで

はここに私のコードです：

function download(csv) { 
    var element = document.createElement('a'); 
    element.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv); 
    element.target = '_blank'; 
    element.download = 'services.csv'; 
    element.click(); 
} 

Answer 1

ホイールを再構築する代わりに、サードパーティライブラリを使用することを検討してください。 download.jsは、このような問題のための本当に素晴らしいクロスプラットフォームライブラリです。あなたのコードは、このライブラリで作業を取得するには、おそらくこのような何かしたい：

download(your_csv_data, "services.csv", "text/csv"); 

をドキュメントし、より多くのクールな例については、リンクをチェックしてください。

Answer 2

は、以下の例のように見えるマークアップを作成します。 「ダウンロード」属性を使用します。

<a href="link/to/your/download/file" download>Download link</a> 

Target = "_ blank"を追加すると、ダウンロードが開始される前に新しいタブでファイルが開きます。

ダウンロード属性を文字列に設定すると、ダウンロードされるファイルの名前はその値になります。