Angular 2 how to display .pdf file

Question

I have an angular2 app, where I want the user to be able to download and open a pdf file in the browser.

Is there an angular2 module or component that I can use?

Answer 1

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

Answer 2

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 !

Answer 3

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.