CODEWITHSUNDEEP
javascriptreactjscsv
user10663763
user10663763

Reputation:

React CSV download is not in CSV format

I'm using react CSV to convert my data to excel CSV.
However when I use the react CSV library to download my data in CSV,
I get this file:

The downloaded file

The content of this file is comma seperated so good to add in CSV.
So why isn't my file in .CSV format?

This is my code for CSVLink:

<CSVLink data={dataex} filename={"belhistorie.csv"} className="btn btn-primary">
    Download me
</CSVLink>

This is my dataex object:

const dataex = [{
     CallID: '247279',
     OriginationName: '',
     DestinationName: 'destination',
     OriginationNumber: '+31555776005',
     DestinationNumber: '+31410008993',
     Calltime: '00:17',
     StartTime: '06-12-2018 08:00',
     EndTime: '06-12-2018 08:00',
     Type: 'incoming',
     State: 'Connected'
},{
     CallID: '247280',
     OriginationName: 'person1',
     DestinationName: 'person2',
     OriginationNumber: '+31777779314',
     DestinationNumber: '803',
     Calltime: '00:54',
     StartTime: '06-12-2018 08:00',
     EndTime: '06-12-2018 08:00',
     Type: 'incoming',
     State: 'Connected'
}];

Upvotes: 0

Views: 3269

Answers (2)

Justin D Chan
Justin D Chan

Reputation: 21

From above, adding .csv to the end worked. The issue only occured on chrome, Firefox already knew it as a .csv.

Upvotes: 2

filoscoder
filoscoder

Reputation: 536

I know it's been over a year ago from the post, but I am facing the same problem on my react-web-app.

Maybe this comment will help you: https://github.com/react-csv/react-csv/issues/46#issuecomment-542537417

Apparently this issue only occurs on Windows users (I'm developing on MacOS -.csv extension works fine- and my window-using-boss tells me about this bug) The basic procedure, is to import a library called "react-device-detect" and create a logic using 'osVersion' or 'osName' method from that library, making an OS detector statement and manually add the ".csv" string to the property "filename" of "CSVLink".

By the way, this is my first "contributing" comment! Hope this helps!

Upvotes: 1

Related Questions