An Angularjs directive <ng-pdf> to display PDF in the browser with PDFJS.

Downloads in past


2.0.07 years ago8 years agoMinified + gzip package size for angular-pdf in KB


angular-pdf Build Status Dependency Status codecov
>An AngularJS directive ng-pdf to display PDF files with PDFJS.

Overview demo

Integrate PDF files right into web pages.
Angular PDF


Check package.json file for dependencies and their versions:


    1. next / previous page
  • zoom in / out / fit 100%
  • rotate clockwise
  • jump to a page number
  • when scrolling, the pdf controls will get fixed position at the top
  • define the view template
  • define the path to pdf with scope variable
  • handles error
  • show loading of pdf
  • show progress percentage of loading pdf
  • insert password for protected PDFs
  • dynamically change the pdf url
  • support retina canvas
  • set authorization or http headers

Getting Started

  1. Install or copy over the file dist/angular-pdf.min.js or dist/angular-pdf.js
npm install angular-pdf --save
bower install angular-pdf --save
  • Include the path to the directive file in index.html
<script src="js/vendor/angular-pdf/dist/angular-pdf.js"></script>
  • Include the directive as a dependency when defining the angular app:
var app = angular.module('App', ['pdf']);
  • Include the directive with the attribute path to the partial under a controller
<div class="wrapper" ng-controller="DocCtrl">
    <ng-pdf template-url="/partials/viewer.html"></ng-pdf>
- `scale` as an option

  <ng-pdf template-url="/partials/viewer.html" scale=1></ng-pdf>

  `scale` attribute can also be `page-fit`

  <ng-pdf template-url="/partials/viewer.html" scale="page-fit"></ng-pdf>
- `page` as an option for initial page number

  <ng-pdf template-url="/partials/viewer.html" page=12></ng-pdf>
- `usecredentials` as an option to add credentials / authorization

  <ng-pdf template-url="/partials/viewer.html" usecredentials="true"></ng-pdf>
- `debug` to enable debugging console output (optional, disabled by default)

  <ng-pdf template-url="/partials/viewer.html" debug="true"></ng-pdf>
  • Include the canvas element to display the pdf in the template-url file

```html ```
  • Include the path to the pdf file in the controller

```js app.controller('DocCtrl', function($scope) {
$scope.pdfUrl = '/pdf/relativity.pdf';
}); `` - Set custom headers, e.g. authorization headers with $scope.httpHeaders` option
```js app.controller('DocCtrl', function($scope) {
$scope.pdfUrl = '/pdf/relativity.pdf';
$scope.httpHeaders = { Authorization: 'Bearer some-aleatory-token' };
}); ```


  1. Next / Previous page: Include the controls in the view file as defined in the attribute template-url

``` < > `` - **Zoom in / out / fit 100%**: Include the controls in the view file as defined in the attribute template-url`
``` + 100% - `` - **Rotate clockwise**: Include the controls in the view file as defined in the attribute template-url and the initial class rotate0`
```html 90 ... ```
include the css styles:
```css .rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); } .rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); } `` - **Jump to page number**: Include the controls in the view file as defined in the attribute template-url`
```html Page: / {{pageCount}} `` - **Fixed pdf controls upon scrolling**: Wrap the controls in the view file as defined in the attribute template-url with a tag nav with an ng-class`. Amend the scroll amount as required.
```html ```
And include the relevant css styles as required:
```css .pdf-controls { width: 100%; display: block; background: #eee; padding: 1em;} .fixed { position: fixed; top: 0; left: calc(50% - 480px); z-index: 100; width: 100%; padding: 1em; background: rgba(238, 238, 238,.9); width: 960px; } `` - open the file index.html` with a web server

When url is base64 or Uint8Array

Create a Blob:
currentBlob = new Blob([result], {type: 'application/pdf'});
$scope.pdfUrl = URL.createObjectURL(currentBlob);

Handle error

In the controller, you can call the function $scope.onError:
$scope.onError = function(error) {
	// handle the error
	// console.log(error);

Show loading

In the controller, you can call the function $scope.onLoad when the pdf succesfully loaded:
$scope.loading = 'loading';

$scope.onLoad = function() {
  // do something when pdf is fully loaded
  // $scope.loading = '';

Show progress percentage

In the controller, you can call the function $scope.onProgress
$scope.onProgress = function(progress) {
	// handle a progress bar
	// progress% = progress.loaded /
	// console.log(progress);

Managing password requests

In the controller, you can use the function scope.onPassword. This function is called when the PDF require an opening password.
$scope.onPassword = function (updatePasswordFn, passwordResponse) {
  // if passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD
  // you can provide the password calling updatePasswordFn('THE_PASSWORD')
  // else if passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD
  // provided password is not correct


  1. If using with Angular UI modal, pageNum attribute is no longer required. Checkout the implementation

Similar projects


PDF example used is Relativity: The Special and General Theory by Albert Einstein as kindly organized and made available free by Project Gutenberg.


This project is an OPEN Open Source Project. This means that:
Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

Please see for details.


This repository follows the Semantic Versioning guidelines:
  1. For patches, run the command:
npm run release patch
  • For minor release, run the command:
npm run release minor
  • For major release, run the command:
npm run release major


MIT license