実装する処理

今回はボタン押下で「.csv」や「.xlsm」ファイルをダウンロードする。という機能を実装したいと思います。(備忘録を込めて)

実装環境については以下です。
- React × Typescript　（今回の実装内容ではtsの恩恵はあまり受けませんが、、）
- material ui (docs)

fetchについて

今回使用するfetchとは、

　fetch() はグローバルのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。

このプロミスはそのリクエストに対するレスポンスを表す Response で解決します。

と、あるようにネットワークからデータを取得できるメソッドとなってます。
(*昔は、XMLHttpRequestを使ってたみたいですが、現在ではfetchを推奨しているようです。)

実装内容

実装内容としては以下のフローにしていきたいと思います。

1. プロジェクトを作成

npx create-react-app my-app --template typescript

2. ダウンロードするファイを作成

今回はプロジェクト内に/public/documentを作成して、その中にDLファイルを作成しておきます。

3. コード記述

適当に「csvダウンロード」と「Excelダウンロード」ボタンを作って、ボタン押下で「fetch」させ、各種ファイルをダウンロードする内容の実装にしていきます。

サンプルコード

src/index.tsx

export const Download = () => {
  // Excelをfetchで取得
  const onClickDownloadExcel = async () => {
    const response = await fetch("/document/sample.xlsm", { method: "get" });
    if (response.ok) {
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "sample.xlsm";
      a.click();
    }
  };
  // CSVをXMLHttpRequestで取得
  const onClickDownloadCsv = async () => {
      // 処理内容はファイル名が.csvになるだけで、Excelと同じ
  }
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div style={{ margin: "150px" }} />
      <Button
        type="submit"
        fullWidth
        variant="contained"
        onClick={onClickDownloadExcel}
      >
        Excelダウンロード
      </Button>
      <div style={{ margin: "15px" }} />
      <Button
        type="submit"
        fullWidth
        variant="contained"
        onClick={onClickDownloadCsv}
      >
        CSVダウンロード
      </Button>
    </Container>
  );
}

実際の画面

解説

まずはasync/awaitを使ってfetchの結果を待ちます。
resuponse.okがtrueならダウンロードを開始します。(elseでエラー時の処理を記述した方が良さそう)
データの取得に成功したら、レスポンスタイプをblobにして受け取ります。
あとは<a>タグを生成してダウンロードさせます。

最後に

以上が簡単なファイルダウンロードの実装でした。
また、今回初めてfetchメソッドを使ってみましたが、POSTパターンや第2引数のoptionsも便利そうなパラメーターがあったので、今後触ってみたいなと思いました。

参考