Angular 2 how to display .pdf file

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 { }

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 OKDate: Fri, 05 May 2017 11:00:32 GMTServer: Apache-Coyote/1.1Content-Disposition: attachment; filename="1/B_FILENAME*****.pdf"Content-Type: application/pdfContent-Length: 34723Keep-Alive: timeout=5, max=96Connection: 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 loadpdf 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 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.