Remix で動的に作ったデータを CSV としてダウンロードする route を作成する

増田林太郎 | HQ

アクセスがあったら動的に作成したデータを CSV としてユーザーにダウンロードさせる route を Remix で作ります。

例として `/csv` というような以下のような route を作ります。タイトルには動的とありますが、ここでは静的な文字列を使います。大抵の場合は DB や API にアクセスしてデータを作成することになるでしょうし、json2csv などを使ってデータの成型を行ったりするでしょう（あと静的なデータを使うにしても dedent などを使って見やすく記述する方が良さそうです。）

import { LoaderFunctionArgs } from "@remix-run/node"

export function loader({ request } : LoaderFunctionArgs) {
    const data=`col1,col2,col3
val1,val2,val3
`
    return new Response(
        data,
        {
            headers: {
                "Content-Type": "text/csv; charset=cp932",
                "Content-Disposition": `attachement;filename="data.csv"`
            },
        }
    )
}

Content-Disposition については以下を参照

この route に @remix-run/react の Link を使って以下のようにアクセスします。

import { Link } from "@remix-run/react";

<Link to="/csv" reloadDocument>CSVダウンロード</Link>

reloadDocument については下記を参照。

その他の参照


いいなと思ったら応援しよう！