The ng2-pdfjs-viewer<\/em> component is built on top of Mozilla’s viewerjs<\/em> and pdfjs<\/em>, so its core is solid. It does have easy-to-use attributes along with the ability to customize anything which pdfjs<\/em> supports. You can find the code demonstrated in this article here<\/a>.<\/p>\n Usage can be as simple as<\/p>\n And viola, the PDF sits right inside the Angular application like this:<\/p>\n Now the question is – what else can I get out of it?<\/p>\n Here are some examples. Suppose you wanted to show two versions of the same document for comparison side by side in your web application. Now you can. Do you want to open the PDF in a separate browser window for traditional viewing? No problem. Do you like to show a print preview dialog automatically after opening the PDF in a new browser window? Piece of cake<\/a>. Automatically download the pdf? Got it<\/a>.<\/p>\n This pdf viewer supports tons of other features, and you have fine control of what to do with it.<\/p>\n Follow these steps to set up the component:<\/p>\n 1. Installation – Like any other package – get it from the npm registry<\/p>\n This is a standard npm package installation command. Make sure it gets installed in dependencies<\/em> using the 2. Configuration – Let your app know you would like to use it<\/p>\n Set it up in your angular As shown here, the module to be imported is It is equally important to add the module 3. Build – Add a build step, so that your angular app has a copy of pdfjs<\/p>\n The Either add an angular<\/em> build step into angular.json<\/em>:<\/p>\n Or use webpack<\/em> or similar bundlers (Hmm, are you still using webpack?)<\/p>\n<ng2-pdfjs-viewer pdfSrc=\"sample.pdf\"><\/ng2-pdfjs-viewer><\/pre>\n
![\"An](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2022\/05\/diagram-description-automatically-generated-1.png\")
<\/p>\nSetup ng2-pdfjs-viewer in an Angular App<\/h2>\n
$ npm install ng2-pdfjs-viewer --save<\/pre>\n
--save<\/code> parameter.<\/p>\nAppModule<\/code>:<\/p>\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { PdfJsViewerModule } from 'ng2-pdfjs-viewer'; \/\/ <-- Import PdfJsViewerModule module\r\n@NgModule({\r\n declarations: [\r\n\tAppComponent,\r\n ],\r\n imports: [\r\n\tBrowserModule,\r\n\tPdfJsViewerModule \/\/ <-- Add to declarations\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\nPdfJsViewerModule<\/code>; this is required as this is the module that makes sure ng2-pdfjs-viewer<\/em> is ready to be used.<\/p>\nPdfJsViewerModule<\/code> into the imports<\/code> section of @NgModule<\/code>. With this step, you are almost ready to use the inline PDF viewer.<\/p>\nng2-pdfjs-viewer<\/code> component is built on top of pdfjs<\/em>, which also means that it\u2019s needed for this angular component to work properly. There are several ways this can be achieved, from the manual process of copying relevant files to automated build scripts. Here are the two most popular mechanisms angular developers use when they need extra files to be copied as part of the build step.<\/p>\n\"assets\": [\r\n { \"glob\": \"**\/*\", \"input\": \"node_modules\/ng2-pdfjs-viewer\/pdfjs\", \"output\": \"\/assets\/pdfjs\" },\r\n]<\/pre>\nvar TransferWebpackPlugin = require('transfer-webpack-plugin');\r\n...\r\nplugins: [\r\n new TransferWebpackPlugin([\r\n\t{ from: 'node_modules\\ng2-pdfjs-viewer\\pdfjs', to: path.join(__dirname, 'assets') }\r\n ])\r\n]<\/pre>\nPDF Loading Events<\/h2>\n
![\"Image](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2022\/05\/graphical-user-interface-text-application-email.png\")
<\/p>\n