CODEWITHSUNDEEP
javascriptreactjsexcelnext.jsdownload
BalkanMan
BalkanMan

Reputation: 63

Download XLS file from external API

My external API returns the following when I make a GET request:

"PK\u0003\u0004\n\u0000\u0000\u0000\u0008\u0000f��T���\tY\u0001\u0000\u0000�\u0004\u0000\u0000\u0013\u0000\u0000\u0000[Content_Types].xml��Mn�0\u0010��=E�-J\u000c]TUE¢��\u0016��\u0000�xB,\u001c���w\u0012(�* �`\u0013+�7�{��\u0019O��I�\u0018H;��Q6\u0014\t��)m\u0017������"�\u0008V�q\u0016s�C\u0012��n<�y���-墎�?IIe�\rP�<Z�T.4\u0010�6,��r\t\u000b����,��hc\u001a[\u000fQ��X����eˏ�A\u0002\u001a\u0012��^زr\u0001�\u001b]B�\[���\u001e\u0008\u0019wv\u001a���\u0001\u000b�<Ih+�\u0001��w�L�\n�\u0019��\u0006\r���ȍ\u000b�/…u0000f��T�v�^_\u0001\u0000\u0000�\u0002\u0000\u0000\u0011\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000�\u0012\u0000\u0000docProps/core.xmlPK\u0001\u0002\u0014\u0000\n\u0000\u0000\u0000\u0008\u0000f��T�\u0005s>[\u0001\u0000\u0000r\u0002\u0000\u0000\u000f\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000e\u0014\u0000\u0000xl/workbook.xmlPK\u0005\u0006\u0000\u0000\u0000\u0000\u0010\u0000\u0010\u0000�\u0003\u0000\u0000�\u0015\u0000\u0000\u0000\u0000"

This is supposed to be my XLS file. At the moment I process it as follows with Axios:

  ...then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data.result]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `EventID-${response.data.result.eventId}_${dateFormat(Date.now(), 'dd-mmm-yyyy')}.xls`);
    document.body.appendChild(link);
    link.click();
  }, errorHandler);

Although this returns an Excel file with an [Object object] column. How can I convert the response to a proper Excel file?

Upvotes: 1

Views: 848

Answers (1)

Deepali Aggarwal
Deepali Aggarwal

Reputation: 1

Here's a sample of my code for your reference:

In my Next.js application, the server-side page cannot transfer blob objects from the server to the client.

So, I have solved this issue by using a component named download-button.tsx, which is used for downloading an Excel file.

component/download-button.tsx

async function download() {
  window.location.href = '/api/download';
}

<Button onClick={() => download()}>Download</Button>

api/download/route.ts

export async function GET(req: Request) {
  const requestUrl = `${apiBaseUrl}/path`;
        
  const fetchResponse = await fetch(requestUrl, {
   method: 'GET',
   headers: {
    Authorization: `Bearer ${accessToken}`,
   },
  });
        
  return new Response(fetchResponse.body, {
   headers: {
   ...fetchResponse.headers,
   'content-disposition': `attachment; filename="filename.xlsx"`,
   },
  });
}

Upvotes: 0

Related Questions