Download file from backend API with React

If you have an endpoint in your API which delivers a file like text/csv; charset=UTF-8 and you want to let your user download this file, read on.

To make it easier for downloading files, I use the FileSaver library.

You can create these ‘Save As’ functions as this one:

‘Save As’ popup for downloading a file with FileSaver

Install it with:

npm install file-saver --save
yarn add file-saver

Next, create the function which will make the request to the API.

// file /src/api/file.js
export const getDownloadFile = async () => {
  return axios.get('/file.csv', {
      responseType: 'blob',
  .then(response => response.blob())

Then create, for example, a button which will let the user download the file

// file /src/pages/DownloadPage.js
import { getDownloadFile } from '../api/file'
import { saveAs } from 'file-saver'


export const DownloadPage = () => {
  const downloadFile = () => {
      .then(blob => saveAs(blob, 'file.csv'))
  return (
    <button type='button' onClick={downloadFile}>Download</Button>

Click Here to Leave a Comment Below

Leave a Reply: