Solución:
¿Ha echado un vistazo a este módulo https://www.npmjs.com/package/ng2-pdf-viewer?
recuerda declararlo en el módulo así
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PdfViewerComponent } from 'ng2-pdf-viewer';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
PdfViewerComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng2-pdf-viewer funciona bastante bien, pero quería la visualización en pdf como en esta página: https://pdfobject.com/static.html
Lamentablemente, tenía un flujo de pdf, y no un pdf directo (no .pdf al final del enlace) como: https: //***********.idshost.fr/ws/** ****** xfer / ws / download / 3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6
la respuesta fue así (solo pegó una parte):
% PDF-1.3% Äåòåë§ó ÐÄÆ 4 0 obj << / Longitud 5 0 R / Filter / FlateDecode >> flujo xTÍÛ6¼û) æØE[²ì89$i½=°×Ë@”µ”e}ôÉKõY:¬,]§K © ùfæwø;, ÷ ^ @ yÄQ²é> Ù £ ÿ¼â £ 1l ¶Ñj-âTßâ1üJ,> à æ {Ü © ¦Ô[email protected]¢
con encabezados como ese
HTTP/1.1 200 OK
Date: Fri, 05 May 2017 11:00:32 GMT
Server: Apache-Coyote/1.1
Content-Disposition: attachment; filename="1/B_FILENAME*****.pdf"
Content-Type: application/pdf
Content-Length: 34723
Keep-Alive: timeout=5, max=96
Connection: Keep-Alive
Escuché que cambiar la disposición de contenido a en línea en lugar de adjuntar hace que el navegador intente abrirlo en lugar de descargarlo, no tengo acceso al servidor, así que no lo intenté.
Mi pdf no se mostraba, obtenía una vista en blanco o el error “no se pudo cargar el documento pdf”. (pero funcionó en algunos PDF poco comunes con
finalmente logré encontrar algo que funcione, tal vez ayude a algunas personas, aquí está el código (angular2):
archivo .ts
import {DomSanitizer,SafeResourceUrl} from '@angular/platform-browser'
import {Headers} from "@angular/http/src/headers";
import {ResponseContentType} from "@angular/http/index";
//somewhere...
this.getConsultationDocumentPDF(this.inputDataFile.hash).subscribe(
(data:any) => { // data type is Response, but since _body is private field i changed it to any
var file3 = new Blob([data._body], {type: 'application/pdf'});
this.dataLocalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file3));
},
error => {
console.log(error);
}
);
public getConsultationDocumentPDF (pHash:string):Observable<Response> {
return this.http.get(
"https://***********.idshost.fr/ws/********xfer/ws/download/"+pHash,
{
headers: new Headers({
"Access-Control-Allow-Origin": "*",
"Authorization": "Bearer "
}),
responseType:ResponseContentType.ArrayBuffer // YOU NEED THAT
}
);
}
Archivo .html (cualquiera de ellos funciona, iframe tiene más funcionalidad para mí, como imprimir)
<div *ngIf="dataLocalUrl != undefined">
<h5>iframe whit local url</h5>
<iframe width="500" height="600" [attr.src]="dataLocalUrl" type="application/pdf"></iframe>
<h5>object whit local url</h5>
<object [attr.data]="dataLocalUrl" type="application/pdf" width="100%" height="100%"></object>
<h5>embed whit local url</h5>
<embed [attr.src]="dataLocalUrl" type="application/pdf" width="100%" height="100%">
</div>
¡Espero que ayude a alguien!
prueba esto. Por favor cambie el filename.pdf
con su ruta real y nombre de archivo
<object data="https://foroayuda.es/filename.pdf" width="100%" height="100%" type="application/pdf">
<p>Sorry, the PDF couldn't be displayed :(</p>
<a href="https://foroayuda.es/filename.pdf" target="_blank">Click Here</a>
</object>