An angular component for displaying pdfs, wrapping the latest Mozilla PDF.js.
npm install @kariudo/ng2-pdfjs-viewerAn angular component for displaying pdfs, wrapping the latest Mozilla PDF.js.
An angular component for displaying pdfs inline(embedded) OR in a new tab along with a feature rich viewer. It functions as a wrapper to Mozilla's PDF.js viewer, now based on āØ v4.0.x āØ. The previous library this project inherited from was stuck on v2.x and the old event handling and aesthetics, which were no longer compatible with current versions.
This project is derived from intbot/ng2-pdfjs-viewer which does not support recent versions of PDF.js.
1. Updated to current version of PDF.js viewer - Fixes a lot of rendering issues, improves eventing.
2. New Events - Added support for additional event bus activities (page rotation, document scale changes).
3. Build Process Improvements - Made it easier to modify this library and maintain changes with the examples.
Angular sample app: https://github.com/kariudo/ng2-pdfjs-viewer/tree/master/SampleApp
Some of below features are unique to this component, which is unavailable in native viewer or other implementations.
āļø Open pdf in new window š - Opens pdf viewer in new window. Also, you may set all allowable external window options.
āļø Direct access to underlying viewer šØāš»š©āš»- Exposed PDFViewerApplication and PDFViewerApplicationOptions objects opens a whole world of customizable PDFJS and ViewerJS properties and methods, allowing to change them programmatically; thus producing a unique viewer experience.
āļø Embed pdf š - Embeds viewer and pdf inside your web page/component.
āļø Blob and byte arrays š - Have pdf as a byte array? Still works.
āļø Events ā” - Handle events such as document loaded, page change, page rotation, scale change, before/after print etc. Please make sure to provide viewerId for events to work properly.
āļø Print preview šØļø - You can set the pdf to open in a new tab or another browser window and provide an immediate print preview, A use case will be a 'Print' button opening pdf in new window with print dialog.
āļø Defaults - There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search, pan, spread, navigate, attachments etc which is also available as-is in this viewer. Not mentioning them individually.
āļø Auto download š¾ - This option allows you to download the pdf file to user device automatically without manually invoking the download.
āļø Auto rotate š - Rotate the document _clockwise_ or _anti-clockwise_ 90Ā° (+/- 90Ā°) just before displaying. Useful if the document is misaligned.
āļø Language š - Set the language of your choice to the viewer controls.
āļø Custom error ā - Hate the defaults pdfjs errors, use this feature to override or append to it.
āļø Side bar š - Open and show the sidebar with relevant information. E.g. Show attachments.
āļø Smart device friendly zoom š± - A better zooming experience on small devices.
āļø Progress spinner ā³ - An optional spinner which displays before document renders.
āļø Show/Hide controls š» - Do not want users to see specific controls (E.g. download button). Use relevant features to remove controls from viewer.
āļø Navigate ā© - Navigate the document using page number, section, or even directly jump to last page if you are expecting a signature from user.
āļø Zoom š - Several zoom methods, auto, percentage (E.g. 150%), page-with/height, fit page etc. with ability to set offset.
āļø Cursor š - Love the age old hand cursor š on your pdf? You got it.
āļø Change file name - You may set the file name of download to a different one, if user chooses to download.
āļø Scroll š - Changes the scroll to your choice. Even wrapped scrolling is supported.
āļø Spread - Allows you to change spread to odd or even.
!angular pdfjs viewer in new window
!angular pdfjs viewer embedded
@kariudo/ng2-pdfjs-viewer``bash`
$ npm install @kariudo/ng2-pdfjs-viewer --save
And then configure it in your Angular AppModule:
`typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { PdfJsViewerModule } from "@kariudo/ng2-pdfjs-viewer"; // <-- Import PdfJsViewerModule module
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
PdfJsViewerModule, // <-- Add to declarations
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`
For several advanced options to work, you need a copy of pdfjs from this npm package.
Edit your project's angular.json file and use ng build as described here https://angular.io/guide/workspace-config#assets-configuration
`json`
"assets": [
{ "glob": "*/", "input": "node_modules/ng2-pdfjs-viewer/pdfjs", "output": "/assets/pdfjs" },
]
_Please note, you must manually Copy node_modules\ng2-pdfjs-viewer\pdfjs to your public or asset folder or use any copy script as part of your build process. Another method could be to use TransferWebpackPlugin if you are using webpack(https://github.com/dkokorev90/transfer-webpack-plugin)._ TransferWebpackPlugin Sample code
`typescript`
var TransferWebpackPlugin = require('transfer-webpack-plugin');
...
plugins: [
new TransferWebpackPlugin([
{ from: 'node_modules\ng2-pdfjs-viewer\pdfjs', to: path.join(__dirname, 'assets') }
])
]
_Please note if you decide to put pdfjs folder anywhere else other than the assets folder, make sure you also set [viewerFolder] property to help locate the folder._
| Attribute | Description | Type | Default Value |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------------------------------------------------------- |
| [pdfSrc] | Fully qualified path to pdf file. (For remote pdf urls over http/https, CORS should be enabled) | string | |PDFViewerApplication
| | This public property exposes underlying PDFViewerApplication object. Make sure to access it after document is loaded. Opens up the whole world of underlying PDFJS properties and methods. Use it to customize the viewer and document experience. | object | |PDFViewerApplicationOptions
| | This public property exposes underlying PDFViewerApplicationOptions object. Make sure to access it after document is loaded. Opens up the whole world of underlying PDFJS options. Use it to customize the viewer and document experience. | object | |[viewerFolder]
| | Set path to _pdfjs's_ web and build folders. | string | assets folder path |[externalWindow]
| | Open in new tab. Set to true to open document in a new tab | boolean | false |externalWindowOptions
| | External window options. For allowed comma separated values, refer to https://developer.mozilla.org/en-US/docs/Web/API/Window/open | string | |(onDocumentLoad)
| | Event to be invoked once document is fully loaded(Must provide viewerId). Also returns number of pages in the $event parameter. E.g. (onDocumentLoad)="testPagesLoaded($event)"" | Function | |(onPageChange)
| | Event to be invoked when user scrolls through pages(Must provide viewerId). Also returns current page number user is at in the $event parameter. E.g. (onPageChange)="testPageChange($event)"" | Function | |(onBeforePrint)
| | Event to be invoked before document gets printed(Must provide viewerId). E.g. (onBeforePrint)="testBeforePrint()" | Function | |(onAfterPrint)
| | Event to be invoked after document gets printed(Must provide viewerId). E.g. (onAfterPrint)="testAfterPrint()" | Function | |downloadFileName
| | Sets/Changes the name of document to be downloaded. If the file name does not ends in .pdf, the component will automatically add it for you. | string | Actual name of the document |[page]
| | Show specific page. E.g _page=3_. You may also get/set the page number from your component using '.' notation explicitly, after document is loaded. E.g. myPdfViewer.page = 3; | number | 1 |[lastPage]
| | Show last page of the document once it is loaded(If set to true). If you use this option along with _page_ option, undesired effects might occur | boolean | false |nameddest
| | Go to a named destination. E.g. To go to section _5.1_ use like nameddest=5.1. Do not mix this option with _page_ and _lastPage_ options | string | |zoom
| | Set zoom level of document. Applicable values are auto, page-width, page-height, page-fit, 200_(As a zoom percentage)_, left offset_(As in "auto,18,827")_, top offset_(As in "auto,18,127")_ | string | auto |[print]
| | Show/hide print button. Set false to hide | boolean | true |[startPrint]
| | Start print preview of document. This combined with _externalWindow_ could mimic a print preview functionality just like the one in gmail. | boolean | |[download]
| | Show/hide download button. Set false to hide | boolean | true |[find]
| | Show/hide search button. Set false to hide | boolean | true |[startDownload]
| | Download document as soon as it opens. You may put this to good use. | boolean | |[rotatecw]
| | Rotate document clock wise 90Ā° | boolean | |[rotateccw]
| | Rotate document anti-clock wise 90Ā° | boolean | |cursor
| | Type of cursor. Available options are _HAND/H_, _SELECT/S_,_ZOOM/Z_. Case is irrelevant. | _SELECT/S_ | |scroll
| | Sets scroll. Available options are _VERTICAL/V_, _HORIZONTAL/H_,_WRAPPED/W_. Case is irrelevant. | _VERTICAL/V_ | |spread
| | Sets Odd or Even spread. Available options are _ODD/O_, _EVEN/E_,_NONE/N_. Case is irrelevant. | _NONE/N_ | |[fullScreen]
| | Show/hide presentation(full screen) button. Set false to hide | boolean | true |cursor
| | Type of cursor. Available options are _HAND/H_, _SELECT/S_,_ZOOM/Z_. Case is irrelevant. | _SELECT/S_ | |pagemode
| | State of sidebar. Available options are _none_, _thumbs_,_bookmarks_,_attachments_. E.g. pagemode=attachments. | _none_ | |[openFile]
| | Show/hide open file button. Set false to hide | boolean | true |[viewBookmark]
| | Show/hide bookmark button. Set false to hide | boolean | true |[showSpinner]
| | Show a simple css based spinner/progress before the document loads | boolean | true |locale
| | Set locale(language) of toolbar/buttons and other viewer elements. E.g. 'de-AT', 'en-GB' etc | string | browser's default language if present, otherwise en-US |[useOnlyCssZoom]
| | Instructs the viewer to use css based zoom. This will produce better zoom effect on mobile devices and tablets. | boolean | false |errorMessage
| | Custom error message | string | |[errorAppend]
| | Appends custom error message to the end of other pdfjs error messages | true |[errorOverride]
| | Overrides all pdfjs error messages and shows only user's custom error message | boolean | false |[diagnosticLogs]
| | Turns on all diagnostic logs to the console | boolean | true |
_Please note, copy step is mandatory to enjoy all of the different options listed above. You may also avoid this step and could directly use https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website if you wish to just use the default viewer_
_For your convenience a sample app using angular is available under this repository, if you would like to see it in action (Folder SampleApp). It shows many ways to configure this component for different needs._
Once your PdfJsViewerComponent is imported you can use it in your Angular application like this:
`xml`
{{title}}
Here is a use case to download and open the pdf as byte array and open in new tab/window:
Please note, pdfSrc can be a Blob or Uint8Array as well
For [externalWindow]="true" to work, pop-ups needs to be enabled at browser level
`xml
typescript
import { Component, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
...export class MyComponent implements OnInit {
@ViewChild('pdfViewerOnDemand') pdfViewerOnDemand;
@ViewChild('pdfViewerAutoLoad') pdfViewerAutoLoad;
...
constructor(private http: HttpClient) {
let url = "api/document/getmypdf"; // Or your url
this.downloadFile(url).subscribe(
(res) => {
this.pdfViewerAutoLoad.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
this.pdfViewerAutoLoad.refresh(); // Ask pdf viewer to load/refresh pdf
}
);
}
private downloadFile(url: string): any {
return this.http.get(url, { responseType: 'blob' })
.pipe(
map((result: any) => {
return result;
})
);
}
public openPdf() {
let url = "url to fetch pdf as byte array"; // E.g. http://localhost:3000/api/GetMyPdf
// url can be local url or remote http request to an api/pdf file.
// E.g: let url = "assets/pdf-sample.pdf";
// E.g: https://github.com/intbot/ng2-pdfjs-viewer/tree/master/sampledoc/pdf-sample.pdf
// E.g: http://localhost:3000/api/GetMyPdf
// Please note, for remote urls to work, CORS should be enabled at the server. Read: https://enable-cors.org/server.html
this.downloadFile(url).subscribe(
(res) => {
this.pdfViewerOnDemand.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
this.pdfViewerOnDemand.refresh(); // Ask pdf viewer to load/reresh pdf
}
);
}
`Additional Information
Given below are examples of writing server apis(In aspnetcore c#) which returns pdfs as byte array. You can choose any server side technology as long as pdf is returned as byte array
Use case 1. As a RDLC local report viewer
c#
[HttpGet]
[Route("MyReport")]
public IActionResult GetReport()
{
// var reportObjectList1
// var reportObjectList2
var reportViewer = new ReportViewer {ProcessingMode = ProcessingMode.Local};
reportViewer.LocalReport.ReportPath = "Reports/MyReport.rdlc"; reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource1", reportObjectList1));
reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource2", reportObjectList1));
Warning[] warnings;
string[] streamids;
string mimeType;
string encoding;
string extension;
var bytes = reportViewer.LocalReport.Render("application/pdf", null, out mimeType, out encoding, out extension, out streamids, out warnings);
return File(bytes, "application/pdf")
}
`Use case 2. Return a physical pdf from server
c#
[HttpGet]
[Route("GetMyPdf")]
public IActionResult GetMyPdf()
{
var stream = await {{__get_stream_here__}}
return File(stream, "application/pdf")); // FileStreamResult // OR
// var bytes = await {{__get_bytes_here__}}
// return File(bytes, "application/pdf")
}
OR
[HttpGet]
[Route("GetMyPdf")]
public IActionResult GetMyPdf()
{
var pdfPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/assets/pdfjs/web/gre_research_validity_data.pdf");
byte[] bytes = System.IO.File.ReadAllBytes(pdfPath);
return File(bytes, "application/pdf");
}
`E-Signature Support
Original issue -> PDF.JS is not able to load the signature in the pdf if that is done via the any E-Signature tool.
Resolution of the issue -> To support this feature need to comment/remove the below code from pdf.worker.js file and file path i.e. lib\pdfjs\build\pdf.worker.js
Original issue code
javascript
if (data.fieldType === "Sig") {
data.fieldValue = null; _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}
`Resoultion code
javascript
if (data.fieldType === "Sig") {
data.fieldValue = null; _this3.setFlags(_util.AnnotationFlag.HIDDEN); //remove or comment this line
}
``Have a question? Ask questions and find answers on Stack overflow.
AngularJS angular-pdfjs-viewer
\\Apache V2 License - https://www.apache.org/licenses/LICENSE-2.0