Issue consuming API that returns Base64 Excel file in Angular

I am facing difficulties consuming an API in Angular that returns an Excel file encoded in Base64. The API is configured in AWS API Gateway and uses a Lambda function to generate the file. Although the API response seems correct (tested in Insomnia/Postman), Angular cannot interpret the content properly.

Problem Details:

1. 
   API Response:
   When I make the request in Insomnia, I receive a response with status 200 OK, and the body contains the Base64-encoded Excel file. Here's an example of the response:
   
   UEsDBBQAAAAIA... (long Base64 string)
2. 
   Response Headers:
   The headers returned by the API include:
   
   Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
   Content-Disposition: attachment; filename="suitability-produtos-20251124-150728.xlsx"
   Access-Control-Allow-Origin: *
3. 
   Angular Configuration:
   In Angular, I am trying to consume the API with the following code:
   
   this.http.post('https://my-api.com/suitability-produtos-templates', {}, { responseType: 'blob' })
   .subscribe((response: Blob) => {
   const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
   const link = document.createElement('a');
   link.href = window.URL.createObjectURL(blob);
   link.download = 'template.xlsx';
   link.click();
   });
   
   
   However, I get the following error:
   
   Response is not a Blob
4. 
   Tests Performed:
   
   • Tested the API in Insomnia and Postman, and the file is returned correctly.
   • Changed responseType to text, json, and other values, but the error persists.
   • Verified the response headers, and they seem correct.
5. 
   Lambda Configuration:
   The Lambda function is configured to return the file in Base64 with the following headers:
   
   const response = {
   statusCode: 200,
   isBase64Encoded: true,
   body: base64EncodedFile,
   headers: {
   "Content-Type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
   "Content-Disposition": "attachment; filename=\"template.xlsx\"",
   "Access-Control-Allow-Origin": "*"
   }
   };
   return response;

Question:


How can I configure my Angular code to correctly consume this API that returns an Excel file in Base64? Is there anything I can adjust in the API Gateway or Lambda function configuration to solve this issue?

What I've Tried:

• Changing responseType in Angular (blob, text, json, etc.).
• Manually decoding the Base64 in Angular.
• Verifying the response headers in Insomnia/Postman.

Additional Information:

• Framework: Angular 16.
• Backend: AWS Lambda + API Gateway.
• The generated Excel file is approximately 87 KB.

Thanks:


Thank you in advance for any help or suggestions!

Continue reading...