Tengo una API que devuelve el archivo cargado como blob. Cuando trato de vincular src con URL de blob, no muestra nada, sin embargo, cuando intento vincular URL directa, puede mostrar un archivo PDF. Aquí está mi código dado a continuación.
Mi código TS
downloadFile(fileData: Fileuploader) { this.tempBlob= null; //Fetching Data File this.apiservice.getDownloadfile(fileData).subscribe( (retFileData: any) => { this.tempRetFileData = retFileData; this.tempBlob = new Blob([retFileData], { type: this.contentType }); }, (err: Error) => { }, () => { const blob: Blob = new Blob([this.tempBlob], { type: this.contentType }); const fileName: string ='ilvsna.pdf'; this.myBlobURL = URL.createObjectURL(blob); } ); }HTML
<pdf-viewer [src]="myBlobURL" [render-text]="true" [original-size]="false" style="width: 400px; height: 500px" ></pdf-viewer>Nota: si configuro la URL de myBlobURL en 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf', entonces puede mostrar
Prueba esto.
t
pdfSrc: Uint8Array; downloadFile(fileData: Fileuploader) { this.tempBlob= null; //Fetching Data File this.apiservice.getDownloadfile(fileData).subscribe( (retFileData: any) => { this.tempRetFileData = retFileData; this.tempBlob = new Blob([retFileData], { type: this.contentType }); const fileReader = new FileReader(); fileReader.onload = () => { this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer); }; fileReader.readAsArrayBuffer(this.tempBlob); }, (err: Error) => { } ); }html
<pdf-viewer [src]="pdfSrc" [render-text]="true" [original-size]="false" style="width: 400px; height: 500px" ></pdf-viewer>Creo que tengo una solución para ti. Puedes usar ArrayBuffer . @NF Code es correcto, sin embargo, usted dijo que recibió un error en la línea => this.pdfSrc = new Uint8Array(fileReader.result);
Entonces, cambie la línea a => this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer); .
Finalmente, su código ts debería verse como a continuación =>
downloadFile(fileData: Fileuploader) { this.tempBlob= null; //Fetching Data File this.apiservice.getDownloadfile(fileData).subscribe( (retFileData: any) => { this.tempRetFileData = retFileData; this.tempBlob = new Blob([retFileData], { type: this.contentType }); const fileReader = new FileReader(); fileReader.onload = () => { this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer); }; fileReader.readAsArrayBuffer(this.tempBlob); }, (err: Error) => { } ); }Resuelvo con window.URL.createObjectURL de mi archivo de blob de devolución del servicio:
-- archivo ts
this.obuService.getObuDocument(obuId, fileId).subscribe( (data: HttpResponse<Blob>) => { const url = window.URL.createObjectURL(data.body); this.src = url; this.viewPDF = true; } ); -- Servicio
getObuDocument(obuId: number, fileId: number): Observable<any> { const options = { observe: 'response' as 'body', Accept: 'application/pdf', responseType: 'blob' as 'blob' }; return this.http.get(this.apiUrl + '/' + obuId + '/upload/' + fileId, options) .pipe(catchError(err => { throw err; }));}