Adding download feature in remix

Heres a quick way add download feature in your remix apps

Create a button or a NavLink. Below is a snippet for NavLink.

<NavLink to="/download" target="_blank" rel="noopener noreferrer">
  Download
</NavLink>

Create a download.tsx inside your /routes. Here is the code complete code of download.tsx from my project.

import { LoaderFunctionArgs } from "@remix-run/node";
import { getAllVehicles, getAllVehicleRecords } from "~/models/cars.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
    const carsListItems = await getAllVehicles();
    const vRecords = await getAllVehicleRecords();
    const obj = {
        vehicles: carsListItems,
        vehicleRecords: vRecords,
    };
    const jsonData = JSON.stringify(obj, ((key, value) =>
        typeof value === 'bigint'
            ? value.toString()
            : value
    ), 2
    );
    return new Response(jsonData, {
        status: 200,
        headers: {
            'Content-Type': 'application/json',
            'Content-Disposition': 'attachment; filename="data.json"',
        },
    });
};

When the user clicks on the Download link above, the /download route will open in a new window and the download will start. The new window will close itself.

And that’s it.