2016-12-06 1 views
7

나머지 api를 사용하여 각도 2의 클라이언트에서 xlsx 파일을 다운로드하고 싶습니다.모서리 2에 blob이있는 xlsx 파일을 다운로드하십시오.

나는 나의 GET 요청의 응답으로 바이트 배열을 받고 있어요 나는 그것을 함께 기능을 다운로드 보내고있다 가입 :

let options = new RequestOptions({ search: params }); 
this.http.get(this.restUrl, options) 
      .subscribe(this.download); 

다운로드 기능을 사용하여 BLOB :

download(res: Response) { 
let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' }); 
FileSaver.saveAs(data, this.fileName);}; 

을 내 문제는 내 파일이 항상 손상되었다는 것입니다. 나는 많은 버전을 시도했지만 아무 것도 작동하지 않습니다.

** 또한이 솔루션으로 시도했지만 작동하지 않습니다 (xlsx 파일이 여전히 손상됨) - Angular 2 downloading a file: corrupt result, 차이점은 데이터가 배열 버퍼이고 문자열 또는 json이 아니며 차이점은 PDF와 xlsx의 차이점.

10x!

+0

[각도이 파일을 다운로드]의 사용 가능한 복제 (http://stackoverflow.com/questions/38793859/angular-2-downloading-a-file) – jlew

+0

이것은 나를 위해 일한 것을 :은 https ://stackoverflow.com/questions/41771041/angular2-download-excel-file-from-web-api-file-is-corrupt/44680057#44680057 – Deepak

답변

1

아무것도 작동하지 않습니다. 나는의 추가와 같은 바이트 배열을 반환하는 내 서버를 변경 : 내 클라이언트에서

response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); 
    response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx"); 

I 다운로드 기능을 삭제하고 대신 GET 부분의 내가했던 :

window.open(this.restUrl, "_blank"); 

이가이다 유일한 방법은 손상되지 않은 xlsx 파일을 저장할 수 있음을 발견했습니다.

당신이 덩어리로 작업을 수행하는 방법에 대한 답이있는 경우 나에게 알려주세요 :)

+0

이것이 내가해야 할 일입니다. blob에서 url 생성을 시도하고 브라우저가 파일을 여는 방법을 알아 내지 못했습니다. 이 게시물의 모든 방법과 다른 많은 방법을 시도했습니다. http://tackoverflow.com/questions/35138424/how-do-i-download-a-file-with-angular2 제공 한 솔루션이 완벽하게 작동했습니다. 감사!!! – hewstone

0

다음 솔루션은 구글 크롬 버전 58.0.3029.110 (64 비트)에서 날 위해 일했습니다. https://brmorris.blogspot.ie/2017/02/download-pdf-in-angular-2.html

그것은 XLSX 파일 같은 원리입니다 :

그것은의 Blob를 사용하여 PDF 파일을 다운로드하는 방법을 설명하는 글이다. 그냥 기사의 단계를 따라 두 가지 변경 :

  • 헤더 대신 { '동의': '응용 프로그램/PDF를'}의 '동의'{사용 : '응용 프로그램/vnd.openxmlformats-officedocument.spreadsheetml을 .시트'};
  • 블롭 (Blob)은 새로운 Blob ([fileBlob], {type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) 생성시 동일한 유형을 사용합니다.

기사는 파일 보호기를 사용하고 있지만 그렇지 않습니다. 필자는 파일 보호기 대신에 내가 사용한 것에 대한 기본 설명과 함께이 기사에서 의견을 남겼습니다.

3

나는 당신과 같은 문제를 겪고있었습니다. Get 옵션에 responseType: ResponseContentType.Blob을 추가하여 수정했습니다. 아래 코드를 확인하십시오 :

public getReport(filters: ReportOptions) { 
    return this.http.get(this.url, { 
      headers: this.headers, 
      params: filters, 
      responseType: ResponseContentType.Blob 
     }) 
     .toPromise() 
     .then(response => this.saveAsBlob(response)) 
     .catch(error => this.handleError(error)); 
} 

saveAsBlob()은 FileSaver의 래퍼입니다.다른 이름으로 저장() :

private saveAsBlob(data: any) { 
    const blob = new Blob([data._body], 
     { type: 'application/vnd.ms-excel' }); 
    const file = new File([blob], 'report.xlsx', 
     { type: 'application/vnd.ms-excel' }); 

    FileSaver.saveAs(file); 
} 
1

당신이 아래의 코드를 사용할 수 있습니다 여기에

var file = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
}); 
saveAs(file,"nameFile"+".xlsx"); 
deferred.resolve(data); 
0

는 IE와 크롬/사파리 브라우저를 지원하는 솔루션입니다. 여기서 '응답'객체는 서비스에서받은 응답입니다. 아카이브 용으로 작업하고 있습니다. 서비스에서받은 응답에 따라 유형을 변경할 수 있습니다.

let blob = new Blob([response], {type: 'application/zip'}); 
    let fileUrl = window.URL.createObjectURL(blob); 
    if (window.navigator.msSaveOrOpenBlob) { 
     window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.zip'); 
    } else { 
     this.reportDownloadName = fileUrl; 
     window.open(fileUrl); 
    }