Angular 8에서 API 응답으로 엑셀 파일을 다운로드하는 방법

Angular 8에서 API 응답으로 엑셀 파일을 다운로드하는 방법

나는 응답으로 엑셀 문서를 반환하는 API를 가지고 있습니다.요청은 간단한 json 하나가 될 것입니다.

구글을 검색해서 파일을 다운로드할 수 있는 코드 기반을 찾아서 애플리케이션에 사용해봤지만, 오류가 발생하여 해결책을 찾을 수 없습니다.아래는 나의 코드 베이스입니다.

구성 요소.ts

import rxjs/Rx;

details = {id: 75,name: "some name"}

this.nameService.getData(this.details).subscribe(response => {
this.downloadFile(response);
})

downloadFile(data: Response) {
  const blob = new Blob([data], { type: '.xlsx' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

nameService.ts

getData(postData) {
  return this.httpService.post('https://localhost:8080/getFile/', postData);
}

httpService.ts

constructor(private http: HttpClient)
post(apiEndpoint: string, request: any) :Observable<any> {
 return this.http.post<any>(apiEndpoint,request);
}

위의 코드 기반으로 아래의 두 개의 오류가 발생하고 파일이 다운로드되지 않습니다.

1. 오류 가져오기:

Blob(const Blob = new Blob([data], {type: '.xlsx'})을 생성할 때 "Type Response를 Blobpart" 유형에 할당할 수 없습니다.

2. 데이터를 변경한 경우(downloadFile(data: any))위의 오류(1)는 사라지지만 저는 오류를 받습니다.httperror구문 오류: 위치 0에 예기치 않은 토큰 Pinjson이 있습니다.json.parse

위와 같은 문제에 대한 해결책을 찾으시는 분이 있으면 도와주시기 바랍니다.

1. 응답 헤더를 설정해야 합니다.{ responseType: 'blob'}청구에 있어서

2. Blob 파일을 만들 때 올바른 MIME-Type을 전달해야 합니다. (예: application/octet-stream 또는 application/vnd.openxmlformats-officedocument.spreadsheetml).시트).

구성 요소.ts

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'application/octet-stream' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

머리글 추가{ responseType: 'blob'}

다음과 같이:

this.http.post<any>(apiEndpoint,request,{ responseType: 'blob'} )

사용 중{ responseType: 'blob'}여기서 대부분의 대답이 효과가 있다고 했듯이, 저는 사용하는 것을 제안하고 싶습니다.responseType: 'arraybuffer'대신에blob와 함께observe: 'response'그러면 통화 내용은 다음과 같습니다.

this.httpClient.get(resource, {
  headers: this.httpHeaders, // Any custom client side headers like Authorization
  observe: 'response',
  responseType: 'arraybuffer'
});

이 기능의 이점은 두 가지입니다.

1. 어레이 버퍼는 일반적인 바이트 스트림이며 다음 중 하나를 사용하여 Blob 개체를 생성할 수 있습니다.blob또는arraybuffer사용Content-Type
2. observe: 'response'구문 분석된 응답의 서버에서 설정한 응답 헤더도 포함됩니다.

이 방법을 사용하여 파일 이름과 MIME 유형을 입력합니다.arraybuffer에서Content-Disposition그리고.Content-Type클라이언트 측에서 일반 다운로드 서비스를 사용합니다.

또한, 저는 사용하는 것을 제안합니다.File단순한 것이 아닌 객체Blob이를 통해 다음과 같은 파일 이름을 지정할 수 있습니다.

public downloadFile(response: any, fileName?: string) {
    const blob = new Blob([response.body], { type: response.headers.get('content-type') });
    fileName = fileName || response.headers.get('content-disposition').split(';')[0];
    const file = new File([blob], fileName, { type: response.headers.get('content-type') });
    saveAs(file);
}

이것은 또한 @knbibin이 사용자 지정 파일 이름 사용에 대해 제기한 문제를 해결할 것입니다.

응답 헤더 설정{ responseType: 'blob'}청구에 있어서

엑셀을 다운로드하려면 아래 기능을 사용하세요.

response - api response, fileName - excel name

downloadExcel(response, fileName) {
    // Doing it this way allows you to name the file
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(res);
    link.download = fileName;
    link.click();
  }

파일을 다운로드하려면 아래 코드를 사용합니다.

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'application/octet-stream' });
  fs.saveAs(blob, fileName + '.xlsx');
}

get 요청에 {responseType: 'application/octet-stream'}을(를) 추가해야 합니다. 게시 메서드를 호출할 필요가 없습니다.

{ responseType : 'application/octet-stream'}

그리고 .ts 파일에서.

DownLoadExcel(){
    this.MprService.downLoadRFQInfoExcel(this.revisionId).subscribe(data =>{this.downloadFile(data)});
}
    
downloadFile(data: Blob) { 
    const contentType = 'application/vnd.openxmlformats-ficedocument.spreadsheetml.sheet'; 
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    window.open(url);
}

자산에서 파일만 다운로드하려는 사용자는 다음 코드를 사용할 수 있습니다.

<a href="./assets/files/file.xlsx" target="_blank"></a>

하지만 각도로 위치를 언급해야 합니다.

"architect": {
   "build": {
      "options": {
    "assets": [
                  "src/assets/files"
              ]
      }
   }
}

언급URL : https://stackoverflow.com/questions/58335807/how-to-download-an-excel-file-in-angular-8-as-an-api-response