0

I have a Flask back-end and a React front-end. At some point data is sent from back-end to front-end where the data is used for several things. Either way, when the data comes from the back-end to the front-end I just save it as follows when the page loads:

const [data, setData] = useState[]

useEffect(() => {
    setData(<data from backend>);
}, []);

Hence, my data should now be stored as data. And data here is just an array of numbers/values. Now I would like to just click a button or something, and then copy the data to the clipboard, where I can then paste it into Excel or something.

I just can't seem to find any good solution to this. So I was wondering how this is done, and if it is even possible without writing 100 lines of code ?

Denver Dang
  • 2,433
  • 3
  • 38
  • 68
  • 1
    See [`Clipboard#writeText`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText): `navigator.clipboard.writeText(data.join('\n'))` - And in case you have multiple columns, you can first join the columns with `\t` and then the rows with `\n`, then it will also work nicely when pasted in Excel. – CherryDT May 30 '22 at 14:45
  • Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – CherryDT May 30 '22 at 14:46

1 Answers1

1

You can set the clipboard text with :

navigator.clipboard.writeText(data)

and you can set onClick event or set that in defined useEffact hook after fetching data.

just code
  • 130
  • 1
  • 6