React でファイルをダウンロードする

1. React で download 属性を使用してファイルをダウンロードする
2. React で js-file-download プラグインを使用してファイルをダウンロードする
3. React でファイルをダウンロードする際のフロントエンドの制限

React アプリケーションを構築するときに、ユーザーがファイルをダウンロードできるようにする必要がある場合があります。たとえば、チケットを購入した場合、PDF でダウンロードしたい場合があります。

この記事では、React でファイルをダウンロードする複数の方法について説明します。

React で download 属性を使用してファイルをダウンロードする

通常、Web 開発者はアンカー要素 <a> を使用して別のページをナビゲートします。 <a> 要素は、download 属性も受け入れます。URL を変更する代わりに、指定された URL にあるファイルを保存するようにブラウザに指示します。

値を指定しない場合、ブラウザはファイルの名前と拡張子を推測します。値を指定すると、ファイル名として解釈されます。

<Link> コンポーネントは、react-router パッケージの一部です。これは、シングルページアプリケーション内でシームレスにナビゲーションするための優れたツールです。アンカー要素と同様に、download 属性も受け入れ、同じように機能します。

現在、世界中のインターネットサーファーの 94.5％が、この属性をサポートするブラウザーを使用しています。他にも制限と条件があります。download 属性の詳細については、公式ドキュメントをお読みください。

場合によっては、ブラウザが download 属性をサポートしていない場合、ファイルは新しいタブで開かれます。

React で js-file-download プラグインを使用してファイルをダウンロードする

最も便利なのは、外部パッケージを使用してファイルをダウンロードすることです。多くのオプションがありますが、js-file-download が最も使いやすいです。

指定された URL ソースからファイルを保存するようにブラウザに指示します。より多くのファイルを保存できるため、download 属性を使用するよりも利点があります。

例を見てみましょう：

import "./styles.css";
import axios from 'axios'
import fileDownload from 'js-file-download'
export default function App() {
  const handleClick = (url, filename) => {
    axios.get(url, {
      responseType: 'blob',
    })
    .then((res) => {
      fileDownload(res.data, filename)
    })
  }
  return (
    <div className="App">
      <button onClick={() => {() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}}>
        Download the File</button>
    </div>
  );
}

この例では、ファイルのソース名と優先名を指定します。次に、これらの値を js-file-download パッケージからインポートされた fileDownload 関数に渡します。この関数は私たちのために他のすべてを行います。

このコードをローカルの create-react-app 環境で実行すると、リンクから画像がダウンロードされます。

React でファイルをダウンロードする際のフロントエンドの制限

まれに、この記事で説明されている 2つのアプローチのいずれかを使用できます。ただし、一般的な経験則として、フロントエンドコードを使用してダウンロードをトリガーすることはお勧めできません。

ブラウザは通常、セキュリティ上の理由から即時ダウンロードをブロックします。これは、Web サイトの所有者がユーザーにマルウェアのダウンロードを強制するのを防ぐために行われます。

代わりに、ファイルのダウンロードをトリガーする応答ヘッダーを返すエンドポイントを作成する必要があります。また、ユーザーの許可なしにファイルのダウンロードを開始しないように注意してください。