Reactで、ファイルのダウンロードの進み具合を表示する方法

import { useCallback, useEffect, useRef, useState } from 'react';

export type DownloadStatus = 'idle' | 'downloading' | 'done' | 'error' | 'canceled';

export type DownloadState = {
  status: DownloadStatus;
  loaded: number; // 受け取ったバイト数
  total: number | null; // 全体のバイト数。分からないときは null
  message?: string;
};

// Content-Length から全体の大きさを読む。読めないときは null
function totalFrom(res: Response): number | null {
  // 圧縮して送られたとき、Content-Length は圧縮後の大きさで、読み取る量（展開後）と合わない
  if (res.headers.get('Content-Encoding')) return null;
  const n = Number(res.headers.get('Content-Length'));
  return Number.isFinite(n) && n > 0 ? n : null;
}

// Blob をファイルとして保存させる
function save(blob: Blob, fileName: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
  URL.revokeObjectURL(url);
}

export function useDownload() {
  const [state, setState] = useState<DownloadState>({ status: 'idle', loaded: 0, total: null });
  const controllerRef = useRef<AbortController | null>(null);

  const start = useCallback(async (url: string, fileName: string) => {
    controllerRef.current?.abort();
    const controller = new AbortController();
    controllerRef.current = controller;
    setState({ status: 'downloading', loaded: 0, total: null });

    try {
      const res = await fetch(url, { signal: controller.signal });
      if (!res.ok) throw new Error(`サーバーがエラーを返しました（${res.status}）`);
      if (!res.body) throw new Error('本文を読み取れませんでした');

      let total = totalFrom(res);
      const reader = res.body.getReader();
      const chunks: Uint8Array<ArrayBuffer>[] = [];
      let loaded = 0;
      setState({ status: 'downloading', loaded, total });

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
        loaded += value.byteLength;
        // 全体より多く届いたら、全体の大きさは当てにならないので「不明」に切り替える
        if (total !== null && loaded > total) total = null;
        setState({ status: 'downloading', loaded, total });
      }

      const type = res.headers.get('Content-Type') ?? 'application/octet-stream';
      save(new Blob(chunks, { type }), fileName);
      setState({ status: 'done', loaded, total: total ?? loaded });
    } catch (e) {
      if (controller.signal.aborted) {
        // 中止したとき。新しいダウンロードに切り替えたときは表示を書き換えない
        if (controllerRef.current === controller) setState((s) => ({ ...s, status: 'canceled' }));
        return;
      }
      const message =
        e instanceof TypeError
          ? `通信のエラーで受け取れませんでした（${e.message}）`
          : e instanceof Error
            ? e.message
            : String(e);
      setState((s) => ({ ...s, status: 'error', message }));
    } finally {
      if (controllerRef.current === controller) controllerRef.current = null;
    }
  }, []);

  const cancel = useCallback(() => {
    controllerRef.current?.abort();
  }, []);

  // コンポーネントを外したら、ダウンロードも止める
  useEffect(() => () => controllerRef.current?.abort(), []);

  return { state, start, cancel };
}

import { useDownload, type DownloadStatus } from './useDownload';

const labels: Record<DownloadStatus, string> = {
  idle: '未ダウンロード',
  downloading: 'ダウンロード中',
  done: '完了',
  error: 'エラー',
  canceled: '中止しました',
};

const mb = (n: number) => (n / 1024 / 1024).toFixed(1);

export function DownloadDemo({ url, fileName }: { url: string; fileName: string }) {
  const { state, start, cancel } = useDownload();
  const busy = state.status === 'downloading';
  const { loaded, total } = state;

  return (
    <div>
      <p>
        <button disabled={busy} onClick={() => start(url, fileName)}>
          ダウンロード
        </button>
        <button disabled={!busy} onClick={cancel}>
          中止
        </button>
      </p>
      {/* 全体が分からないときは value を渡さず、動き続ける表示にする */}
      {total ? <progress value={loaded} max={total} /> : <progress />}
      <p>
        {total
          ? `${Math.floor((loaded / total) * 100)}%（${mb(loaded)} / ${mb(total)} MB）`
          : `${mb(loaded)} MB 受信（全体の大きさは不明）`}
      </p>
      <p>{labels[state.status]}</p>
      {state.message && <p>{state.message}</p>}
    </div>
  );
}

応答のヘッダー: content-length=5242880 content-encoding=(なし) transfer-encoding=(なし)
押してから約1000ms: 20%（1.0 / 5.0 MB）、ダウンロード中、value=1097728 max=5242880 position=0.209
押してから約2500ms: 52%（2.6 / 5.0 MB）、ダウンロード中
完了後: 100%（5.0 / 5.0 MB）、完了
保存されたファイル: 名前 sample.bin、5242880 バイト、sha256 58c55e678c799cf1（サーバーのデータ 58c55e678c799cf1）

1 MiB を受け取った read() の回数 64、1回の量 最小 16384、最大 16384、合計 1048576

応答のヘッダー: content-length=(なし) transfer-encoding=chunked
押してから約1500ms: 1.5 MB 受信（全体の大きさは不明）、ダウンロード中、value=null max=null position=-1.000
完了後: 100%（3.0 / 3.0 MB）、完了、value=3145728 max=3145728 position=1.000

Content-Length 243172、Content-Encoding gzip、読み取った合計 3145728 バイト、loaded / Content-Length = 1293%

フックで完了後: 100%（3.0 / 3.0 MB）、保存されたファイル 3145728 バイト
フックの表示の移り変わり（最初の3件と最後）: 0.1 MB 受信（全体の大きさは不明） → 0.3 MB 受信（全体の大きさは不明） → 0.5 MB 受信（全体の大きさは不明） → … → 100%（3.0 / 3.0 MB）

[cors=1] 届いたヘッダー content-encoding=gzip、ページから読めた値 Content-Length=243172 Content-Encoding=null
[cors=1] フックの表示の移り変わり（最初の3件と最後）: 0%（0.0 / 0.2 MB） → 41%（0.1 / 0.2 MB） → 0.3 MB 受信（全体の大きさは不明） → … → 100%（3.0 / 3.0 MB）

[cors=1&expose=1] 届いたヘッダー content-encoding=gzip、ページから読めた値 Content-Length=243172 Content-Encoding=gzip
[cors=1&expose=1] フックの表示の移り変わり（最初の3件と最後）: 0.1 MB 受信（全体の大きさは不明） → 0.3 MB 受信（全体の大きさは不明） → 0.5 MB 受信（全体の大きさは不明） → … → 100%（3.0 / 3.0 MB）

中止を押した直後: 41%（2.1 / 5.0 MB）、中止しました
1秒後: 41%（2.1 / 5.0 MB）、サーバーの記録 {"id":6,"mode":"length","size":5242880,"sent":2211840,"finished":false,"closedByClient":true,"bodyBytes":5242880}、保存の回数 0
中止のあとのボタン: ダウンロード disabled=false、中止 disabled=true

外した時点でサーバーが送ったバイト数 約1687552、4秒後のサーバーの記録 {"id":7,"mode":"length","size":5242880,"sent":1687552,"finished":false,"closedByClient":true,"bodyBytes":5242880}、保存の回数 0

  [console.error] Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
結果: 40%（2.0 / 5.0 MB）、エラー、通信のエラーで受け取れませんでした（network error）

結果: 0.0 MB 受信（全体の大きさは不明）、エラー、サーバーがエラーを返しました（404）