Reputation: 3647
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
Reputation: 1
If you are using Astro Js the fix is wrapping the CSVLink in an a tag.
Upvotes: 0
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
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
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