ReactでJSONファイルをブラウザから直接ダウンロードさせる方法

React のような SPA (Single Page Application) では、変数から直接 JSON ファイルを出力したいことがあります。

そんなときには、以下のスクリプトを試してみてください。

    const fileName = 'finename.json';
    const data = new Blob([JSON.stringify(exportJson)], { type: 'text/json' });
    const jsonURL = window.URL.createObjectURL(data);
    const link = document.createElement('a');
    document.body.appendChild(link);
    link.href = jsonURL;
    link.setAttribute('download', fileName);
    link.click();
    document.body.removeChild(link);

試した範囲では、パソコンのブラウザは OK、スマホのブラウザも Android は OK、iPhone などの iOS は iOS13 から OKでした。iOS13からSafariでもダウンロードができるようになったようです。

なお、IE は試してません(お約束)。

ちなみに、JSON だけでなく、Content-Type を text/csv にしたら CSV ファイルもダウンロードできたので、割合多くのフォーマットに対応できるのではないかと思います。