Angulaire 2 téléchargement d'un fichier: corrompre la suite

Je suis tenté de télécharger un fichier à l'aide Angulaire 2/Tapuscrit et Web API. Le problème que j'ai est que lorsque vous téléchargez le fichier texte, le fichier est fichier mais lorsque vous tentez de télécharger un fichier PDF, par exemple, qu'il est corrompu. Le contenu du fichier téléchargé est déformée non-sens.

Le Tapuscrit que j'utilise est comme suit:

downloadFile(fileId: string): Observable<File> {
    this.applicationsUrl = `${APIConfig.BaseUrl}/documents/download/${fileId}/`;

    let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.applicationsUrl, '', options)
        .map(this.extractContent)
        .catch(this.handleError);
}

private extractContent(res: any) {
    let blob: Blob = new Blob([res._body], { type: 'application/pdf'});
    window['saveAs'](blob, 'test.pdf');
}

La fenêtre['enregistrer sous'] est juste une solution de contournement pour accéder au JavaScript FileSaver.js fonctions.

En outre, j'ai mis res:Réponse à la res:tout afin que je puisse accéder au contenu privé _body de propriété en vertu de JavaScript sans compiler échec en caractères d'imprimerie.

Toute aide serait grandement appréciée.

InformationsquelleAutor Bren Gunning | 2016-08-05
  1. 10

    Comme Angulaire RC5 code suivant devrait fonctionner pour vous:

    downloadFile(fileId: string): Observable<File> {
this.applicationsUrl = `${APIConfig.BaseUrl}/documents/download/${fileId}/`;

let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });

return this.http.post(this.applicationsUrl, '', options)
    .map(this.extractContent)
    .catch(this.handleError);
}

private extractContent(res: Response) {
    let blob: Blob = res.blob();
    window['saveAs'](blob, 'test.pdf');
}

    J'ai eu un Problème similaire et réglage de l'Accepter-d'en-Tête de application/pdf, responseType à Blob et d'accéder à la goutte par le biais de la Méthode correspondante sur la Réponse résolu pour moi 🙂
    (Je suis en utilisant FileSaver, trop)

    • Comment utilisez-vous FileSaver? Pouvez-vous donner un exemple d'utilisation de la Machine?
    InformationsquelleAutor Chris
  2. 0

    Nous avons eu un problème similaire et avait pour configurer un messageConverter sur le côté ressort. L'extrait de code ci-dessous est à partir du Printemps de fichier de config :-

        @Override
     public void configureMessageConverters(List<HttpMessageConverter<?>> 
         converters) {
    //Here we add our custom-configured HttpMessageConverter
   /* Message converter for supporting Hibernate lazy objects */
    converters.add(jacksonMessageConverter());
    converters.add(byteArrayHttpMessageConverter());
    super.configureMessageConverters(converters);
}

    public ByteArrayHttpMessageConverter byteArrayHttpMessageConverter() {
    ByteArrayHttpMessageConverter arrayHttpMessageConverter = new ByteArrayHttpMessageConverter();
    arrayHttpMessageConverter.setSupportedMediaTypes(getSupportedMediaTypes());
    return arrayHttpMessageConverter;
} 

private List<MediaType> getSupportedMediaTypes() {
    List<MediaType> list = new ArrayList<MediaType>();
    list.add(MediaType.APPLICATION_OCTET_STREAM);
    list.add(MediaType.parseMediaType("application/pdf"));
    return list;
}

    Plus de détails sur la configuration de message convertisseurs peuvent être trouvés ici:-
    http://www.baeldung.com/spring-httpmessageconverter-rest

    Vous avez encore besoin d'ajouter l'option "Accepter" en-tête de la demande comme répondu par Chris. Cela aidera à la carte de la réponse à un message approprié convertisseur configuré sur le côté ressort.

    • Ce pourrait être trop tard, mais peut bénéficier à quelqu'un d'autre!
    InformationsquelleAutor java dev