Angular2 téléchargé le corps de la réponse docx est vide

Question

J'utilise Angular2 pour télécharger un fichier .docx généré à partir de mon serveur express. Le fichier est généré par un outil et enregistré sur le serveur, puis envoyé à l'interface.

La journalisation de mon navigateur indique que la longueur du résultat est supérieure à 0, mais que le blob envoyé n'a pas de corps, le contenu réel du document est introuvable.

J'ai suivi plusieurs exemples et tutoriels, en particulier this one, mais aucun résultat jusqu'à présent. Qu'est-ce que je fais mal?

back-end express:

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 Service:

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 Composant:

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) 
     ); 
} 

Le contenu du blob enregistré dans la console Chrome:

size: 68192 
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" 
__proto__: Blob 

Donc ... une taille sans contenu. L'aide est appréciée!

Answer 1

Vous devez renvoyer explicitement response.blob de function lorsque vous avez utilisé des parenthèses dans la fonction de flèche.

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); 
} 

Ou plutôt, vous pouvez faire cette fonction map une doublure

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

Similar answer ici