Comment recevoir blob réponses à l'aide Angulaire 2+ @angulaire/http module?

Je suis en train de fournir un fichier pdf à télécharger à partir angulaire à 2 app...

ce code fonctionne:

    var reportPost = 'variable=lsdkjf';

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://localhost/a2/pdf.php", true);
    xhr.responseType = 'blob';
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {//Call a function when the state changes.
        if(xhr.readyState == 4 && xhr.status == 200) {
            var blob = new Blob([this.response], {type: 'application/pdf'});
            saveAs(blob, "Report.pdf");
        }
    }

    xhr.send(reportPost);

mais j'aurais bien aimé utiliser angulaire 2 Http intégré dans le client.

un peu de recherche:

et des tests de code:

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    this.http.post('http://localhost/a2/pdf.php', reportPost,  {
        headers: headers
        })
        .retry(3)
        //.map( (res:any) => res.blob() ) //errors out
        .subscribe(
          (dataReceived:any) => {
            var blob = new Blob([dataReceived._body], {type: 'application/pdf'});
            saveAs(blob, "Report.pdf");
          },
          (err:any) => this.logError(err),
          () => console.log('Complete')
        );

ps. le saveAs fonction vient d'ici: https://github.com/eligrey/FileSaver.js

  • Semble que le blob()-méthode n'est pas encore mis en œuvre. Voir github.com/angular/angular/blob/master/modules/angular2/src/.... Un problème de suivi de l'état de mise en œuvre peut être trouvé ici: github.com/angular/angular/issues/2803
  • Comment avez-vous "enregistrer sous" au travail? J'ai installé le module, installé le typings, et toujours avoir "pas une telle fonction: saveAs" quand je le lance.. tellement ennuyeux... comment voulez-vous inclure dans le fichier d'enregistrement de code? (j'utilise webpack, je n'ai toujours pas compris)
  • j'ai juste été en ignorant l'erreur de la TS compilateur. - il encore de la compile... bâclée hein?
InformationsquelleAutor ryanrain | 2015-12-08
  1. 50

    Avec la sortie de Angular2 final on peut par exemple définir un service:

    @Injectable()
export class AngularService {

    constructor(private http: Http) {}

    download(model: MyModel) { //get file from service
        this.http.post("http://localhost/a2/pdf.php", JSON.stringify(model), {
            method: RequestMethod.Post,
            responseType: ResponseContentType.Blob,
            headers: new Headers({'Content-Type', 'application/x-www-form-urlencoded'})
        }).subscribe(
            response => { //download file
                var blob = new Blob([response.blob()], {type: 'application/pdf'});
                var filename = 'file.pdf';
                saveAs(blob, filename);
            },
            error => {
                console.error(`Error: ${error.message}`);
            }
        );
    }
}

    Ce service vous permettra d'obtenir un fichier et ensuite de le servir à un utilisateur.

    Exemple de fichier zip: Comment utiliser JAX-RS et d'angle 2+ à télécharger un fichier zip

    • merci ! j'ai raté le responseType: ResponseContentType.Blob.
    • quelqu'un peut-il marquer ce que la bonne réponse s'il vous plaît, j'ai été la recherche de ce dans les âges.
    • importer {ResponseContentType } à partir de '@angulaire/http';
    • Facile et bonne solution.
    • J'ai dû utiliser http.get(url, <aucun>{responseType: "application/octet-stream"}), parce que http.obtenez de ne pas reconnaître responseType de type ResponseContentType, et nécessite de la chaîne. Et vous ne pouvez pas définir d'autres cordes que "json" j'ai donc dû tromper TS compilateur.
    • J'obtiens cette erreur [ts] Property 'blob' does not exist on type 'Blob'. quelqu'un sait pourquoi?

    InformationsquelleAutor Sergio
  2. 14

    Avec @4.3, @5 et HttpClientModule, j'ai fini par faire:

    this.http.post(`${environment.server}/my/download`,
                data, 
                {responseType: 'blob', observe: 'response'})
              .map( res => ({content: res.body, 
                             fileName: res.headers.get('content-filename')}));
    InformationsquelleAutor sabithpocker
  3. 1

    Voir ici: https://stackoverflow.com/a/45666313/4420532

    return this._http.get('/api/images/' + _id, {responseType: 'blob'}).map(blob => {
  var urlCreator = window.URL;
  return this._sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
})
    InformationsquelleAutor Felix