Set a filename when using CSVDownload

[cmdalbem]

The filename prop allows to set a custom filename to the CSV file, however it's available only when using the CSVLink component. Would be interesting to be able set a filename when using the CSVDownload component as well.

[rlyle]

Yes, please on this feature..

[junbinku]

Is this feature still ongoing?

[iorabi]

@abdennour will #69 resolve this? if so, when can this be merged.

[Lyncee59]

+1 on this feature too, really need to be able to set a filename !

[davecat]

is not work

[davecat]

But I found a correct way, you can use replace. example:
<CSVlink filename='name' data='data'> <div /> <CSVlink>
simulation this div click.

[KasparasK]

+1 on this feature

[chris-burkhardt]

This still doesn't work. Why wouldn't you have this feature on CSVDownload when you have it CSVLink? 2 years and still open? Please add it as a feature. 🙏

[RTurek]

Can a maintainer update and merge #137 to fix this please?

[immanuelf9]

Here is a way around this issue by using refs. https://stackoverflow.com/questions/53504924/reactjs-download-csv-file-on-button-click

[dimdog]

I ended up copying "core" from the lib as "Core.js" and writing:

import React, { useEffect, useRef, useState } from 'react';
import {buildURI} from './Core';

export const CSVDownload = (props) => {
    const urlRef = useRef();
    const [url, setUrl] = useState("");
    useEffect(() => {
        setUrl(buildURI(props.data));
    }, [])
    useEffect(() => {
        if (url.length >0){
            urlRef.current.link.click()
        }
    }, [url]);

    return <a href={url} download={props.filename} ref={urlRef} />;
} 

Works exactly as expected.

[tamlyn]

Here's another drop-in replacement for CSVDownload thats supports filename and uses only CSVLink:

import React, { useEffect, useRef } from 'react'
import { CSVLink } from 'react-csv'
const CSVDownload = (props) => {
  const btnRef = useRef(null)
  useEffect(() => btnRef.current?.click(), [btnRef])
  return (
    <CSVLink {...props}>
      <span ref={btnRef} />
    </CSVLink>
  )
}

[williams335]

This can help to solve the problem:
#72 (comment)

[dhanushkakp]

Is there any solution for this? This issue has open in 2017!!

[chris-burkhardt]

@dhanushkakp I could not find a solution either so I created my own CSV Download functionality here: https://gist.github.com/cburkhardtBB/14ba0e3a37c2cef83eaea79e8c93092d

It supports headers/no headers, file naming based on time, and is all done in less than 100 lines of code.

[solarstar101]

abandoned?

[ChrisRey-C]

This workaround worked #47 (comment)