chanchal118
chanchal118

Reputation: 3647

CSVLink generating HTML instead of CSV in `react-csv` npm package

I am trying to download a CSV file from the below data:

import { CSVLink } from "react-csv";

headers = [
  { label: "First Name", key: "firstname" },
  { label: "Last Name", key: "lastname" },
  { label: "Email", key: "email" }
];

data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "[email protected]" },
  { firstname: "Raed", lastname: "Labes", email: "[email protected]" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "[email protected]" }
];

<CSVLink data={data} headers={headers}>
  Download me
</CSVLink>;

When I click the Download me link, I get a file with .csv extension, but it contains the HTML of that page. If I use CSVDownload the correct CSV file is downloaded.

I am using Next.js. What additional thing should I add to CSVLink so I get the correct CSV data?

Upvotes: 3

Views: 2895

Answers (4)

Denilson Emmanuel
Denilson Emmanuel

Reputation: 1

If you are using Astro Js the fix is wrapping the CSVLink in an a tag.

Upvotes: 0

Greg
Greg

Reputation: 471

I had the same issue in Next.js. I wathced many videos and articles and I found the problem is the 2.2.2 version. In one of the videos the guy used 2.0.3 version so I decided to giv it a try and it's working perfectly.

Upvotes: 0

Hamza Lakrati
Hamza Lakrati

Reputation: 7

using [email protected]

I was able to replicate the issue on Next.js. I managed to solve the issue by adding a separator:

<CSVLink data={data} headers={headers} separator={","}>
    Export
</CSVLink>

Upvotes: 1

Bryan Lumbantobing
Bryan Lumbantobing

Reputation: 693

Just down grade to react-csv 2.0.3 version. It's solve the issue for me. I think this is happening after the release of 2.2.* version.

Upvotes: 2

Related Questions