Angular2에서 다운로드 한 docx 응답 본문이 비어 있습니다.

Question

Express2에서 생성 된 .docx 파일을 Angular2를 사용하여 다운로드하고 있습니다. 파일은 도구로 생성되어 서버에 저장된 다음 프론트 엔드로 전송됩니다.

브라우저 로깅 결과의 길이가 0보다 크지 만 보내지는 BLOB에는 본문이 없으므로 문서의 실제 내용을 찾을 수 없습니다.

나는 여러 가지 예제와 튜토리얼, 특히 this one을 따라 갔지만 지금까지는 결과가 없습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

명시 백엔드 :

generate(req: express.Request, res: express.Response): void { 
    try { 
     var docxGenerator = new DocxGenerator(); 
     docxGenerator.generate((error, filename) => { 
      if (error) res.send(error); 
      if (filename) { 
       res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'); 
       res.setHeader('Content-disposition', 'attachment; filename=GeneratedFile.docx'); 
       var file = fs.readFileSync(filename); 
       res.end(file); 
      } 
     }); 
    } catch (error) { 
     res.send(error); 
    } 
} 

Angular2 서비스 :

export class DocxTemplaterService { 

// declarations left out for brevity 

constructor(
    private http: Http, 
    private authService: AuthenticationService 
) { 
    this.headers = new Headers({'Content-Type': 'application/json'}); 
    this.headers.append('Authorization', 'Bearer ' + this.authService.token()); 
    this.options = new RequestOptions({ headers: this.headers }); 
} 

generateDocx(): Observable<any> { 
    this.options.responseType = ResponseContentType.Blob; 
    return this.http 
     .post(this.docxUtilUrl + '/create', JSON.stringify(module), this.options) 
     .map(response => { 
      console.dir(response); 
      response.blob(); 
     }) 
     .catch(this.handleError); 
} 

private handleError(error: any) { 
    return Promise.reject(error.message || error); 
} 
} 

Angular2 구성 요소 :

generateDocx(module: Module) { 
    this.docxTemplateService 
     .generateDocx() 
     .subscribe(
      data => { 
       console.log(`Word data: ${data}`); 
       if (data !== undefined) 
        // save file somehow 
       else console.log('No file to download.'); 
      }, 
      error => { this.alertService.error(error); }, 
      () => this.alertService.success("Success", true) 
     ); 
} 

Chrome 콘솔에 로그인 된 Blob 내용 :

그래서 내용이없는 크기입니다. 도움말을 평가했습니다.

Answer 1

화살표 기능에서 괄호를 사용했을 때 response.blob을 function에서 명시 적으로 반환해야합니다.

generateDocx(): Observable<any> { 
    this.options.responseType = ResponseContentType.Blob; 
    return this.http 
     .post(this.docxUtilUrl + '/create', JSON.stringify(module), this.options) 
     .map(response => { 
      console.dir(response); 
      return response.blob(); //need to return response blob 
     }) 
     .catch(this.handleError); 
} 

또는 오히려 당신은 그것을 해결하기 위해 듯 map 기능을 하나의 라이너 여기

.map(response => response.blob()) 

Similar answer