CODEWITHSUNDEEP
reactjsexcelexceljsfilesaver.js
alexgarciaalcuadrado
alexgarciaalcuadrado

Reputation: 196

Excelljs file not downloading properly

I'm using Exceljs to write over an xlsx template file in the server and return it to the front so that is saved as an excel file. But the file is saved with [Object object] as the value of the first cell and I don't know how to fix it.

This is the method in the back

const GetReport = async (req: Request, res: Response, next: NextFunction) => {
  const fileURL = 'C:PATH-TO-FILE/src/templates/emptyTest.xlsx';
  const workbook = new ExcelJS.Workbook();
  await workbook.xlsx.readFile(fileURL);
  const worksheet = workbook.getWorksheet('Hoja 1');
  worksheet.insertRow(1, { id: 1, name: 'John Doe', dob: new Date(1970, 1, 1) });

  // Export the modified spreadsheet

  const buffer = await workbook.xlsx.writeBuffer();
  return res.status(200).send({
    status: 'Success',
    data: buffer,
  });
};

And this is the front

AdminService.GetReport()
                .then((res) => {
                  const blob = new Blob([res.data]);
                  saveAs(blob, 'Report.xlsx');
                })
                .catch((error) => console.log(error));

I tried setting the type of the blob to 'application/octet-stream' and 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' but nothing. The xlsx is downloaded but without the row that i inserted

Upvotes: 0

Views: 46

Answers (1)

alexgarciaalcuadrado
alexgarciaalcuadrado

Reputation: 196

I found the solution and I'll leave it here if anyone needs it. In the end i needed to write an output file and return that instead.

const GetReport = async (req: Request, res: Response, next: NextFunction) => {
  const fileURL = '/forecastReportTemplate.xlsx';
  const workbook = new ExcelJS.Workbook();
  await workbook.xlsx.readFile(fileURL);
  const worksheet = workbook.getWorksheet('Cover Sheet');
  const data = ['rere', 'fdsds'];
  worksheet.getRow(1).values = Object.keys(data[0]).map((key: string) => key);
  worksheet.getRow(1).font = {
    name: 'Cambria',
    family: 4,
    size: 14,
    bold: true,
  };
  // Write the output file before getting it back
  await workbook.xlsx.writeFile('/output.xlsx');

  await workbook.xlsx.readFile('/output.xlsx');
  const buffer = await workbook.xlsx.writeBuffer();
  res.setHeader('Content-Type', 'application/octet-stream');
  res.setHeader('Content-Disposition', 'attachment; filename="Full Forecast Report.xlsx"');

  // Send the XLSX file as response
  res.send(buffer);
};

And then in the front I get it like this

AdminService.GetReport()
                .then(async (res: any) => {
                  const url = window.URL.createObjectURL(new Blob([res]));
                  const a = document.createElement('a');
                  a.href = url;
                  a.download = 'Full Forecast Report.xlsx';
                  document.body.appendChild(a);
                  a.click();
                  document.body.removeChild(a);
                  window.URL.revokeObjectURL(url);
                })
                .catch((error) => console.log(error));

Upvotes: 0

Related Questions