Angular 下载 Excel 从 AWS API 网关下载时损坏

Question

I'm creating an excel on the backend and return it as follows:

return ResponseEntity.ok()
        .contentLength(export.contentLength())
        .contentType(MediaType.parseMediaType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"))
        .body(export);

Downloading on the angular frontend as follows:

this.service.export()
.subscribe((res) => {
  const url = window.URL.createObjectURL(res);
  let a = document.createElement('a');
  document.body.appendChild(a);
  a.setAttribute('style', 'display: none');
  a.href = url;
  a.download = `export_${dateFormat(new Date(), 'dd-mm-yyyyy_HH:MM:ss')}`;
  a.click();
  window.URL.revokeObjectURL(url);
  a.remove();
});


  public export(): Observable<Blob> {
    return this.http.get<Blob>(`${environment.apiUrlServer}/export`, {
      responseType: 'blob' as 'json'
    });
  }

This works fine when I'm running the backend on my local machine. Now the backend is deployed on AWS and it's behind a AWS API Gateway.

When I download the excel file via the API gateway via angular the excel is corrupted. When I use postman it works fine.

What am I doing wrong?

Answer 1

I know what is the problem bcz i encounter the same problem. Aws Internally works as Linux deployment so in backend u need to change the method that is used for byte conversion. Your frontend is fine u need to change the way in byte conversion that u used in backend.

Answer 2

I found the problem. So Angular needs to be informed what the blob type will be. It seems that they decide based on the headers. So once I added my request headers it works fine. The blob is correctly transformed.

  public export(): Observable<Blob> {
    return this.http.get<Blob>(`${environment.apiUrlServer}/export`, {
      headers: new HttpHeaders({
        'Accept':'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      }),
      responseType: 'blob' as 'json'
    });
  }