web-dev-qa-db-fra.com

PDF Blob n'affiche pas le contenu, Angular 2

J'ai un problème très similaire à celui-ci PDF Blob - La fenêtre contextuelle ne montrant pas le contenu , mais j'utilise Angular 2. La réponse à la question était de définir responseType sur arrayBuffer, mais cela ne fonctionne pas dans Angular 2 , l'erreur est le type reponse n'existe pas dans le type RequestOptionsArgs. J'ai aussi essayé de l'étendre par BrowserXhr, mais je ne travaille toujours pas ( https://github.com/angular/http/issues/83 ).

Mon code est:

createPDF(customerServiceId: string) {
   console.log("Sending GET on " + this.getPDFUrl + "/" + customerServiceId);

   this._http.get(this.getPDFUrl + '/' + customerServiceId).subscribe(
       (data) => {
            this.handleResponse(data);
         });
}

Et la méthode handleResponse:

handleResponse(data: any) {
     console.log("[Receipt service] GET PDF byte array " + JSON.stringify(data));

     var file = new Blob([data._body], { type: 'application/pdf' });            
     var fileURL = URL.createObjectURL(file);
     window.open(fileURL);
 }

J'ai également essayé de sauvegarder la méthode As de FileSaver.js, mais c'est le même problème, pdf s'ouvre, mais le contenu n'est pas affiché. Merci

pdfangularbytearrayblob
13
Loutocký

J'ai eu beaucoup de problèmes avec le téléchargement et l'affichage du contenu de PDF, j'ai probablement perdu un jour ou deux à résoudre ce problème. Je vais donc vous présenter un exemple concret montrant comment télécharger PDF avec succès ou l'ouvrir dans un nouvel onglet:

myService.ts 

downloadPDF(): any {
        return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
        (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}

myComponent.ts 

this.myService.downloadPDF().subscribe(
        (res) => {
            saveAs(res, "myPDF.pdf"); //if you want to save it - you need file-saver for this : https://www.npmjs.com/package/file-saver

        var fileURL = URL.createObjectURL(res);
        window.open(fileURL); / if you want to open it in new tab

        }
    );

REMARQUE

Il est également intéressant de noter que si vous étendez la classe Http pour ajouter headers à toutes vos demandes ou à quelque chose du genre, cela peut également créer des problèmes pour le téléchargement de PDF car vous écraserez RequestOptions, à laquelle nous ajoutons responseType: ResponseContentType.Blob vous obtiendrez une erreur The request body isn't either a blob or an array buffer.

59
Stefan Svrkota

ANGULAIRE 5

J'ai eu le même problème que j'ai perdu quelques jours à ce sujet.

Ici, ma réponse peut aider les autres, ce qui a aidé à rendre le pdf. 

Pour moi même si je mentionne en tant que responseType: 'arraybuffer', il n'a pas pu le prendre. 

Pour cela, vous devez mentionner en tant que responseType: 'arraybuffer' en tant que 'json'. ( Reference )

Code de travail

downloadPDF(): any {
    return this._http.get(url, {  responseType: 'blob' as 'json' }).subscribe((res) => {
        var file = new Blob([res], { type: 'application/pdf' });            
        var fileURL = URL.createObjectURL(file);
        window.open(fileURL);
    }
}

Référé du lien ci-dessous

https://github.com/angular/angular/issues/18586

1
MPPNBD

Amit, Vous pouvez renommer le nom du fichier en ajoutant une variable à la fin de la chaîneso saveAs(res, "myPDF.pdf"); 

Devient 

saveAs(res, "myPDF_"+someVariable+".pdf");

où une variable peut être un compteur ou mon préféré une chaîne de date/heure.

0
Ken