web-dev-qa-db-ja.com

反応jsでファイルをダウンロードする方法

APIからの応答としてファイルのURLを受け取ります。ユーザーがダウンロードボタンをクリックすると、新しいタブでファイルプレビューを開かずにファイルをダウンロードする必要があります。反応jsでこれを達成するには？

javascriptreactjsdownload
16
Sameer Thite

フロントエンドからのブラウザーダウンロードのトリガーは信頼できません。

行うべきことは、呼び出されたときに正しい応答ヘッダーを提供するエンドポイントを作成し、ブラウザーのダウンロードをトリガーすることです。

フロントエンドコードでできることは、それだけです。たとえば、「ダウンロード」属性は、ブラウザによっては新しいタブでファイルを開くだけです。

調べる必要がある応答ヘッダーは、おそらくContent-TypeおよびContent-Dispositionです。詳細な説明については、これを確認してください answer .

6
Jackyef

これはReactとは関係ありません。ただし、アンカー<a>要素のdownload属性を使用して、ファイルをダウンロードするようブラウザーに指示することができます。

<a href='/somefile.txt' download>Click to download</a>

これはすべてのブラウザでサポートされているわけではありません： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

13
lipp

ブラウザは、ダウンロード属性を使用せずにアンカータグをクリックすると、リンクを検出して直接ダウンロードできるほどスマートです。

aPIからファイルリンクを取得したら、アンカータグを作成してプレーンJavaScriptを使用し、その場で動的にすぐにクリックして削除します。

const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
4
Mohammad altenji

Reactルーターを使用している場合、これを使用します。

<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>

/files/myfile.pdfはpublicフォルダー内にあります。

2
Javier López