Ouvrir un fichier pdf à partir de tableau d'octets dans angulaire 5
J'étais en suivant les liens ci-dessous pour afficher la page pdf dans un nouvel onglet dans mon angulaire 5 application. Mais impossible d'atteindre le résultat.
Je suis en consommant le tableau d'octets à partir du printemps contrôleur api.
PDF Blob n'est pas l'affichage du contenu, Angulaire 2
PDF Blob - fenêtre Pop-up pas à afficher du contenu
J'ai essayé les options ci-dessous, mais aucun d'eux n'est de travail.
Essai 1
Consommé de la réponse en json
composant.ts
clickEvent(){
this.service.getPDF().subscribe((response)=>{
let file = new Blob([response.byteString], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
})
}
service.ts
getPDF(){
const url = `${this.serviceUrl}/pdf`;
const httpOptions = {
headers: new HttpHeaders(
{
'Accept': 'application/json',
'responseType':'blob'
}
)
};
return this.http.get<any>(url, httpOptions);
}
Essai 2
Consommé de la réponse en json
composant.ts
clickEvent(){
this.service.getPDF().subscribe((response)=>{
let file = new Blob([response.byteArray], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
})
}
service.ts
getPDF(){
const url = `${this.serviceUrl}/pdf`;
const httpOptions = {
headers: new HttpHeaders(
{
'Accept': 'application/json',
'responseType':'arraybuffer'
}
)
};
return this.http.get<any>(url, httpOptions);
}
Essai 3
Consommé de la réponse en octets
composant.ts
clickEvent(){
this.service.getPDF().subscribe((response)=>{
let file = new Blob([response], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
})
}
service.ts
getPDF(){
const url = `${this.serviceUrl}/pdf`;
const httpOptions = {
headers: new HttpHeaders(
{
'responseType':'blob' //both combination
//'responseType' : 'arraybuffer'
}
)
};
return this.http.get<any>(url, httpOptions);
}
Par l'ensemble de la combinaison, je ne suis que l'obtention de deux résultats.
Vide document pdf ou d'Échec de chargement de document PDF.
Pour la compréhension de l'affichage java spring code du contrôleur.
controller.java
@GetMapping(value = "/pdf")
public ResTest generatePDF(HttpServletResponse response) throws IOException {
ResTest test = new ResTest();
ByteArrayOutputStream baos = docTypeService.createPdf();
test.setByteArray(baos.toByteArray());
test.setByteString(new String(baos.toByteArray()));
return test;
}
Vous devez vous connecter pour publier un commentaire.
Enfin, j'ai été en mesure de rendre des pdf. Il y avait deux petites erreurs de ma part.
1 st Problème a été, j'ai donné 'responseType' à l'intérieur de HttpHeaders ce qui était faux.
Il doit être à l'extérieur comme ci-dessous.
2 ème Problème c'est que, même si vous mentionnez que responseType : 'arraybuffer", il a été incapable de le prendre. Pour cela vous avez besoin de mentionner que responseType : 'arraybuffer" comme "json".(Référence)
De la correction et travail de code ci-dessous.
Essai 3
composant.ts (nochanges)
service.ts
Transmis à partir du lien ci-dessous
https://github.com/angular/angular/issues/18586
J'ai eu le même problème avec angulaires et visualisation des pdf. Je vais décrire ma solution - utiliser la chaîne encodée en base64. Tous les navigateurs modernes soutien base64.
Utilisation
import java.util.Base64
pour décoder votre tableau d'octetsSur le frontend côté utilisation standard de type mime pour les fichiers pdf et d'indiquer que vous êtes en utilisant base64
data:application/pdf;base64,
.Réf. pour les types mime: https://en.wikipedia.org/wiki/Media_type
Si vous avez besoin d'ouvrir le document dans une nouvelle fenêtre:
Si vous avez besoin pour ouvrir dans un nouvel onglet, il vous suffit de fournir votre code html href:
bypassSecurityTrustUrl
va assainir votre url. Comme je me souviens, il y avait un problème avec angulaire de la sécurité, qui m'empêchait de voir le contenu.PS. avant de vérifier comment il fonctionne avec angulaires je tiens à vous recommander pour stocker le fichier pdf sur un disque et essayez de l'ouvrir. Je veux dire, que vous devez certainement vous assurer que vous fichier est valide et vous pouvez l'ouvrir avec un lecteur simple.
Mise à jour. La plus simple solution consiste à utiliser pdf.js bibliothèque https://github.com/mozilla/pdf.js
Avez-vous cherché une composante angulaire pour envelopper pdf.js?
Exemple d'utilisation:
pdfSrc
peut être une urlstring
ou unUInt8Array