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

user_1202487 0
Viewed 347

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: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

<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?

next.js reactjs csv
2 Answers

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.

user_127208750

using react-csv@2.2.2

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>
user_199978370
Related