APIからの応答としてファイルのURLを受け取ります。ユーザーがダウンロードボタンをクリックすると、新しいタブでファイルプレビューを開かずにファイルをダウンロードする必要があります。反応jsでこれを達成するには?
フロントエンドからのブラウザーダウンロードのトリガーは信頼できません。
行うべきことは、呼び出されたときに正しい応答ヘッダーを提供するエンドポイントを作成し、ブラウザーのダウンロードをトリガーすることです。
フロントエンドコードでできることは、それだけです。たとえば、「ダウンロード」属性は、ブラウザによっては新しいタブでファイルを開くだけです。
調べる必要がある応答ヘッダーは、おそらくContent-Type
およびContent-Disposition
です。詳細な説明については、これを確認してください answer .
これはReactとは関係ありません。ただし、アンカー<a>
要素のdownload
属性を使用して、ファイルをダウンロードするようブラウザーに指示することができます。
<a href='/somefile.txt' download>Click to download</a>
これはすべてのブラウザでサポートされているわけではありません: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
ブラウザは、ダウンロード属性を使用せずにアンカータグをクリックすると、リンクを検出して直接ダウンロードできるほどスマートです。
aPIからファイルリンクを取得したら、アンカータグを作成してプレーンJavaScriptを使用し、その場で動的にすぐにクリックして削除します。
const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Reactルーターを使用している場合、これを使用します。
<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>
/files/myfile.pdf
はpublic
フォルダー内にあります。