Angular 2 how to display .pdf file

ng2-pdf-viewer blob
ng2-pdf-viewer github
angular 2 pdf-viewer component
open pdf in iframe angularjs
angular-file viewer
download pdf in angular 7
angular display pdf in modal
ngx pdf generator

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?

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

Displaying PDF Files in Your Angular Application, We will create a input type element that will take source path of pdf file and display into div container. I am assuming you have created angular  In Angular, it’s easy for the code to obtain the PDF documents from the Web API method to browsers by assigning the Web API URL to the target source, such as iframe tag, embed tag, or another window. In the sample application, the iframe is used to display the PDF data report, Product Order Activity,

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 !

PDF Viewer Example Using Angular 2/4, Angular 5+ component for rendering PDF. https://vadimdez.github.io/ng2-pdf-​viewer/ 2 = RenderTextMode. Render local PDF file. This is onother pdf viewer tutorial, I am creating simple angular 4 tutorial that will display pdf using ng2 pdf viewer libs. We will create a input type element that will take source path of pdf file and display into div container.

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, The viewer includes a handful of widgets, making it ideal for basic PDF viewing use cases: Opening a local file; Toggling document outline  We are using angular directive angularjs-pdf to view pdf file in angular application, which are internally using pdf.js JavaScript library to create angular directive.The directive embeds the full viewer, which allows you to scroll through the pdf file.

If you want PDF viewer with a classy toolbar, then use ngx-extended-pdf-viewer. It has all needed options such as print, download, page navigation etc.

How to use the library:

  1. Install the library with npm i ngx-extended-pdf-viewer --save
  2. Add following scripts to your angular.json

    "scripts": [ "node_modules/ngx-extended-pdf-viewer/assets/pdf.js", "node_modules/ngx-extended-pdf-viewer/assets/pdf.worker.js", "node_modules/ngx-extended-pdf-viewer/assets/viewer.js" ]

  3. Add "NgxExtendedPdfViewerModule" to the import section of your module file

  4. Display it in your component like this:

<ngx-extended-pdf-viewer src="'assets/example.pdf'" useBrowserLocale="false"> </ngx-extended-pdf-viewer>

How to Build a PDF Viewer with Angular and PDF.js, Have you looked at this module https://www.npmjs.com/package/ng2-pdf-viewer ? don't forget to declare it in the module this way import { BrowserModule } from  I am not sure how to handle this in Angular, the ideal situation would be to (1) assign it to a scope, (2) 'prepare/rebuild' the blob to a pdf (3) pass it to the HTML using <embed> because I want to display it within the app.

try this. Please change the filename.pdf with your actual path and file name

 <object data="filename.pdf" width="100%" height="100%" type='application/pdf'>
   <p>Sorry, the PDF couldn't be displayed :(</p>
   <a href="filename.pdf" target="_blank">Click Here</a>
 </object>

‍ Angular 2 how to display .pdf file, After we installed package open app.module.ts in src/app/ , import PdfViewerModule from ng2-pdf-viewer and add it to imports of our module, so that in the end  The popup opens nicely, but it does not show the embedded pdf. It does not even try to load the url from the service. The download link works nicely and asks if the pdf should be saved to disc or opened. I tried to embed the pdf outside of the popup to no avail, too. I tried Chrome, Edge and IE. None displays the embedded pdf.

Render PDF in Angular 4+ - Vadym Yatsyuk, I am new in angular2. I have a PDF file that i want to display on the popup open time is their any angular2 module or component that i can use for to show the  PDF, JPG and PNG file types are also supported pure client-side, while 30+ additional formats (including CAD) are available when WebViewer is augmented with our server SDKs. linkStep 1 - Initial Setup. This project was generated with Angular CLI version 7.0.3. See Angular - Getting Started for more information.

Angular 2 how to display .pdf file, 2 or above) installed globally on the local machine. Please check the node.js and Angular CLI documents for details. Pdf_AspNetCore_Ng_Cli. Go through the following steps for creating Angular project to download file from server using Angular. Creating Project. Go through the link Creating Angular Project to create a new project. Make sure you give the project name as angular-file-download.

PDF Document Display and File Downloads with Angular , Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives. To show the pdf file from C1 Web API PDFDocument Services, set the following basic properties: fullScreen: Indicates whether viewer is under full screen mode. Add the sample PDF file name in the assets section of the .angular-cli.json file Import the PdfViewerModule in the AppModule The next step is to represent the PDF on the screen.

Comments
  • did you tried <object></object>
  • I've started to collect all available options on pdfviewer.net/alternatives. Granted, at the moment, the majority of this website is devoted to my own library (ngx-extended-pdf-viewer). I'm going to cover the alternatives in depth soon.
  • Yes. but it is not working. it gives error while i use selector name of this coponent on html file. is their any another component or module??
  • Could you please post a code snippet and the error that you are receiving?
  • error is : "pdf-viewer" element is not a angular2 component.
  • Have you added "pdf-viewer" into the module declarations?
  • Ok I have just set it up locally and have it working. So I am pretty sure the module works. I am happy to push the example up with a sample pdf. Or alternatively would it be possible for you to share a snippet of the code for the component and module?
  • Ty this is way better than the pdf viewer. For me all 3 solutions offer printing. Would be good to know the pros and cons between them.
  • I am getting the following error Error: unsafe value used in a resource URL context. Could anyone help me
  • Unsafe value usually has to do with sanitization, you haven't forgotten to use this function this.domSanitizer.bypassSecurityTrustResourceUrl() ? @MPPNBD
  • @AmbroiseRabier, Hi! I did it like you said, but have error "The PDF document could not be loaded" after building project
  • @Pantera Maybe your pdf is corrupted, does the response look alike what I have pasted?
  • It gives a cors error