Reactで、複数のファイルをZIPにまとめてダウンロードする方法

npm i jszip
npm i -D @types/node

node_modules/jszip/index.d.ts(7,23): error TS2688: Cannot find type definition file for 'node'.
node_modules/jszip/index.d.ts(35,13): error TS2503: Cannot find namespace 'NodeJS'.

export type ZipEntry = { path: string; data: Blob | string };

// すでに圧縮された形式は、DEFLATE をかけてもほとんど小さくならない
const STORED = /\.(jpe?g|png|gif|webp|mp4|zip|pdf)$/i;

// 同じ名前のファイルを入れると上書きされるので、「名前 (2).拡張子」のようにずらす
export function uniquePath(path: string, used: Set<string>): string {
  let candidate = path;
  const dot = path.lastIndexOf('.');
  const base = dot > path.lastIndexOf('/') ? path.slice(0, dot) : path;
  const ext = path.slice(base.length);
  for (let n = 2; used.has(candidate); n++) candidate = `${base} (${n})${ext}`;
  used.add(candidate);
  return candidate;
}

export async function createZip(entries: ZipEntry[], onProgress?: (percent: number) => void): Promise<Blob> {
  // JSZip は小さくないので、ZIP を作るときに初めて読み込む
  const { default: JSZip } = await import('jszip');
  const zip = new JSZip();
  const used = new Set<string>();
  for (const { path, data } of entries) {
    zip.file(uniquePath(path, used), data, { compression: STORED.test(path) ? 'STORE' : 'DEFLATE' });
  }
  return zip.generateAsync({ type: 'blob' }, (meta) => onProgress?.(meta.percent));
}

export function saveBlob(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);
}

import { useState } from 'react';
import { createZip, saveBlob, type ZipEntry } from './zip';

export type DownloadFile = { name: string; url: string };

type Status =
  | { kind: 'idle' }
  | { kind: 'fetching'; done: number; total: number }
  | { kind: 'zipping'; percent: number }
  | { kind: 'done'; size: number }
  | { kind: 'error'; message: string };

async function fetchBlob(file: DownloadFile, signal: AbortSignal): Promise<Blob> {
  const res = await fetch(file.url, { signal });
  if (!res.ok) throw new Error(`${file.name} を取得できませんでした（${res.status}）`);
  return res.blob();
}

export function ZipDownloadButton({ files, zipName }: { files: DownloadFile[]; zipName: string }) {
  const [status, setStatus] = useState<Status>({ kind: 'idle' });
  const busy = status.kind === 'fetching' || status.kind === 'zipping';

  async function handleClick() {
    // 1つでも取得に失敗したら、残りの取得を止める
    const controller = new AbortController();
    let done = 0;
    setStatus({ kind: 'fetching', done, total: files.length });
    try {
      const entries: ZipEntry[] = await Promise.all(
        files.map(async (file) => {
          const data = await fetchBlob(file, controller.signal).catch((e) => {
            controller.abort();
            throw e;
          });
          done++;
          setStatus({ kind: 'fetching', done, total: files.length });
          return { path: file.name, data };
        }),
      );
      const blob = await createZip(entries, (percent) => setStatus({ kind: 'zipping', percent: Math.floor(percent) }));
      saveBlob(blob, zipName);
      setStatus({ kind: 'done', size: blob.size });
    } catch (e) {
      setStatus({ kind: 'error', message: e instanceof Error ? e.message : String(e) });
    }
  }

  return (
    <div>
      <button onClick={handleClick} disabled={busy || files.length === 0}>
        {files.length}件を ZIP でダウンロード
      </button>
      <p role="status">
        {status.kind === 'fetching' && `ファイルを取得中（${status.done}/${status.total}）`}
        {status.kind === 'zipping' && `ZIP を作成中（${status.percent}%）`}
        {status.kind === 'done' && `${zipName} を保存しました（${Math.round(status.size / 1024)} KB）`}
        {status.kind === 'error' && status.message}
      </p>
      {status.kind === 'zipping' && <progress max={100} value={status.percent} />}
    </div>
  );
}

import { useState } from 'react';
import { ZipDownloadButton, type DownloadFile } from './ZipDownloadButton';

const FILES: DownloadFile[] = [
  { name: '写真/海.jpg', url: '/files/sea.jpg' },
  { name: '写真/山.jpg', url: '/files/mountain.jpg' },
  { name: '写真/花.png', url: '/files/flower.png' },
  { name: '資料/売上.csv', url: '/files/sales.csv' },
  { name: '資料/表紙.png', url: '/files/cover-a.png' },
  { name: '資料/表紙.png', url: '/files/cover-b.png' },
];

export function App() {
  const [checked, setChecked] = useState<boolean[]>(() => FILES.map(() => true));
  const selected = FILES.filter((_, i) => checked[i]);

  return (
    <>
      <ul>
        {FILES.map((file, i) => (
          <li key={file.url}>
            <label>
              <input
                type="checkbox"
                checked={checked[i]}
                onChange={(e) => setChecked((c) => c.map((v, j) => (j === i ? e.target.checked : v)))}
              />
              {file.name}
            </label>
          </li>
        ))}
      </ul>
      <ZipDownloadButton files={selected} zipName="ダウンロード.zip" />
    </>
  );
}

写真/            フォルダ
写真/海.jpg       STORE   UTF-8フラグ=True  1239821 →  1239821 バイト  元のファイルと同じ=True
写真/山.jpg       STORE   UTF-8フラグ=True  1606333 →  1606333 バイト  元のファイルと同じ=True
写真/花.png       STORE   UTF-8フラグ=True   964237 →   964237 バイト  元のファイルと同じ=True
資料/            フォルダ
資料/売上.csv      DEFLATE UTF-8フラグ=True   699411 →   120768 バイト  元のファイルと同じ=True
資料/表紙.png      STORE   UTF-8フラグ=True     1159 →     1159 バイト  元のファイルと同じ=True
資料/表紙 (2).png  STORE   UTF-8フラグ=True     1086 →     1086 バイト  元のファイルと同じ=True