[Q] How client(React.js) download excel file in NodeJS?

💬 Questions and Help

Hi everyone,

I have two separate projects. Client: React, Server: NodeJS

I create excel on the NodeJS side by submitting a form by React.

I want to download this excel from React side. However, I couldn’t download it.

NodeJS code

  res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  res.setHeader("Content-Disposition", "attachment; filename=" + "Report.xlsx");
  workbook.xlsx.write(res)
      .then(function(){
          res.end();
      });

NodeJS return network layer

First try React.js code

 startDownload(response,"resobyte.xlsx")

function startDownload(file, fileName) {
    const url = window.URL.createObjectURL(new Blob([file]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    link.parentNode.removeChild(link);
}

Second try React.js code

  let blob = new Blob([response], {type: 'vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
            FileSaver.saveAs(blob, 'fileName.xlsx");

The file has been downloaded.

My React Service Call

export const createExcel = async (model) => {
  let response = () => {
      return new Promise(function(resolve, reject) {
        fetch(API_URL + '/api/excel/create', {
          method: 'POST',
          responseType: 'arrayBuffer',
          headers: {
          'Content-Type': 'application/json',
          'x-access-token' : TokenService.getToken()
          },
          body: JSON.stringify(model),
        }).then(response => {
          resolve(response);
        });
      });
    };
    let responseData = await response();
    return responseData;
}

Error open excel file

Please do not originate issue 37. Because I tried all of them don’t work.

[resobyte]

Hi @aksharj,

React.js

export const getExcel = async (id,isSendMail = true) => {
  axios.get(API_URL + '/api/excel/getExcel/'+id+'?isSendMail='+isSendMail, { responseType: 'arraybuffer' , headers: {
    'x-access-token' : TokenService.getToken()
    }})
    .then((response) => {
      const dirtyFileName = response.headers['content-disposition'];
      const regex = /filename[^;=\n]*=(?:(\\?['"])(.*?)\1|(?:[^\s]+'.*?')?([^;\n]*))/;
      var  fileName = dirtyFileName.match(regex)[3];
    
      var blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      fileSaver.saveAs(blob, fileName);
    });
}

Node.js

   res.setHeader('Access-Control-Expose-Headers', "Content-Disposition"); //IMPORTANT FOR React.js content-disposition get Name
   res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
   res.setHeader("Content-Disposition", "attachment; filename=" + fileNameExcel+".xlsx");
    return workbook.xlsx.write(res)
        .then(function(){
            res.end();
        });
      })

You can fix this code.

I used axios and fileSaver. You can use GET method.

Important: responseType :‘arrayBuffer’

[mudassiriqball]

You can do this by fetch API. I am using Next.js so I have placed my .xslx file into the public folder.

const downloadBulkUploadTemplete = async () => {
    fetch("SpreadsheeName.xlsx", {
        method: 'GET',
    }).then(response => response.blob())
        .then(blob => {
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = "bac.xlsx";
            document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
            a.click();
            a.remove();  //afterwards we remove the element again 
        });
    }