Reactでリンクからファイルをダウンロードする方法

ダウンロード属性を使用する方法: Reactでは、HTMLの<a>要素にdownload属性を追加することで、リンクをクリックしたときにファイルをダウンロードすることができます。

<a href="https://example.com/file.pdf" download>ファイルをダウンロードする</a>

この方法は、単純なファイルダウンロードには有効ですが、Reactのステートやプロパティを使用する場合には適していません。

axiosを使用する方法: axiosは、HTTPクライアントライブラリであり、ファイルをダウンロードするために使用できます。まず、axiosをインストールします。

npm install axios

次に、以下のようにaxiosを使用してファイルをダウンロードします。

import axios from 'axios';
const downloadFile = async () => {
  const url = 'https://example.com/file.pdf';
  const response = await axios({
    url,
    method: 'GET',
    responseType: 'blob', // ファイルをBlob形式で取得する
  });
  const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

この方法では、axiosを使用してファイルを取得し、Blob形式でレスポンスデータを処理します。次に、createObjectURLメソッドを使用して、BlobオブジェクトをURLに変換し、ダウンロード用のリンクを作成します。最後に、リンクをクリックしてファイルをダウンロードします。

fetch APIを使用する方法: fetch APIは、ブラウザの組み込みのHTTPクライアントです。以下は、fetch APIを使用してファイルをダウンロードする例です。

const downloadFile = async () => {
  const url = 'https://example.com/file.pdf';
  const response = await fetch(url);
  const blob = await response.blob();
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

この方法では、fetch関数を使用してファイルを取得し、レスポンスデータをBlob形式で取得します。その後、同様にBlobオブジェクトをURLに変換し、ダウンロード用のリンクを作成してファイルをダウンロードします。

これらはReactでリンクからファイルをダウンロードするための一般的な方法です。プロジェクトの要件や好みに応じて、適切な方法を選択してください。