Angular 2 how to display .pdf file
Try this:
<embed src="/assets/pdf/pr.pdf"
style="width: 100%;height: 500px"
type="application/pdf">
The Embed tag can be place anywhere in your template. Change the style attrs and src as needed.
ng2-pdf-viewer work quite good, but i wanted the pdf display like on this page : https://pdfobject.com/static.html
Sadly, i had a pdf stream, and not a direct pdf (no .pdf at the end of the link) like : https://***********.idshost.fr/ws/********xfer/ws/download/3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6
the response was like that (only pasted a part):
%PDF-1.3 %Äåòåë§ó ÐÄÆ 4 0 obj << /Length 5 0 R /Filter /FlateDecode >> stream xTÍÛ6¼û)æØE[²ì89$i½=°×Ë@"µ"e}ôÉKõY:¬,]§k©ùfæwø;,÷^@yÄQ²é>Ù£ÿ¼â£1l ¶Ñj-âTßâ1üJ,>à æ{Ü©¦Ô6@¢
whit headers like that
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
i heard that changing content-disposition to inline instead of attachment make the browser try to open it instead of downloading, i don't have access to server so didn't tried.
My pdf would not show, getting blank view, or error "failed to load pdf document". (but it worked on some rare pdf whit <object> and <embed>, but not <iframe> for unknow reason)
finnaly managed to find something that work, maybe it help some people, here is the code (angular2):
.ts file
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
}
);
}
.html file (any of them work, iframe has more fonctionnality for me, like print )
<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>
Hope it help somebody !
Try ng2-pdfjs-viewer (https://www.npmjs.com/package/ng2-pdfjs-viewer). IMHO, it proved to be the easiest and most reliable to use so far - while building a pdf intense application. You get a full figure viewer and a lot of additional functionalities - print preview, auto download, open in new tab, zoom, scroll, go to page/named destination, rotate document etc. It works with pdf streams and physical pdf files alike. If you are building around serving pdf through web browser on angular; this package is of great help.
Install it
$ npm install ng2-pdfjs-viewer --save
Add to app module
import { PdfJsViewerModule } from 'ng2-pdfjs-viewer'; // <-- Import PdfJsViewerModule module
@NgModule({
imports: [
PdfJsViewerModule // <-- Add to declarations
],
bootstrap: [AppComponent]
})
export class AppModule { }
- Use it.
<ng2-pdfjs-viewer pdfSrc="mydoc.pdf"></ng2-pdfjs-viewer>
Have you taken a look at this module https://www.npmjs.com/package/ng2-pdf-viewer?
remember to declare it in the module like so
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 { }