REST API EXPRESS JS: Can not download file in Reactjs, which is send by back-end

Question

I created REST API using Express JS to send Excel file:


app.get('/download/', async (req, res) => {
    try {
       await res.download('./ExcelCopy.xlsx');
    } catch (e) {
        res.status(400).send(e);
    }
});

But in Reactjs when I connect to API nothing happens, but redux tells everything went well:

export const getExcel = () => async (dispatch) => {
  await dispatch(getExcelRequest());
  try {
    await axios.get('http://127.0.0.1:8888/download/');
    dispatch(getExcelSuccess());
  } catch (error) {
    console.log(error);
    dispatch(getExcelFailed());
  }
};

What should I do in order to download a file from back-end using react js

no, Im getting nothing. If I in browser type local **http://127.0.0.1:8888/download/** it downloads Excel file as expected — Bekhzod Beka, Dec 04 '19 at 06:56
You can use filesaver npm package https://www.npmjs.com/package/file-saver — Surjeet Bhadauriya, Dec 04 '19 at 07:05
A similar kind of question https://stackoverflow.com/questions/43460162/react-excel-file-download-corrupt/46331201 — Surjeet Bhadauriya, Dec 04 '19 at 07:05
Does this answer your question? [React excel file download corrupt](https://stackoverflow.com/questions/43460162/react-excel-file-download-corrupt) — Afsanefda, Dec 04 '19 at 07:46

Surjeet Bhadauriya · Accepted Answer · 2022-01-17T08:39:12.843

You need to add response type and use npm package file-saver to download the file.

Modified Code:

export const getExcel = () => async (dispatch) => {
  await dispatch(getExcelRequest());
  try {
    axios.get('http://127.0.0.1:8888/download/', { responseType: 'arraybuffer' })
      .then((response) => {
         var blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
              fileSaver.saveAs(blob, 'data.xlsx');
              dispatch(getExcelSuccess());

       });        
   } catch (error) {
      console.log(error);
      dispatch(getExcelFailed());
   }
};

score 0 · Answer 2 · answered Dec 04 '19 at 07:02

As far as I know, you can not just send a get request to download the file. Instead I would suggest you to use this module named js-file-download.

Example usage:

const FileDownload = require('js-file-download');

const response = await axios.get('http://127.0.0.1:8888/download/')
FileDownload(response.data, 'ExcelCopy.xlsx');

Hope it helps.

REST API EXPRESS JS: Can not download file in Reactjs, which is send by back-end

2 Answers2