Need help with angular-pdfjs-viewer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

legalthings
131 Stars 116 Forks MIT License 81 Commits 45 Opened issues

Description

PDF.js viewer directive for AngularJS

Services available

!
?

Need anything else?

Contributors list

PDF.js viewer Angular directive

Embed Mozilla's PDF.js viewer into your angular application, maintaining that look and feel of pdf's we all love. The directive embeds the full viewer, which allows you to scroll through the pdf.

Low maintenance

We're no longer using this library ourselves. We'll merge pull requests and create new releases, but not actively solve issues.

viewer-example

Installation

 npm install angular-pdfjs-viewer --save

Browser supperort

Chrome, FireFox, Safari and Egde.

Usage

Below you will find a basic example of how the directive can be used. Note that the order of the scripts matters. Stick to the order of dependencies as shown in the example below. Also note that images, translations and such are being loaded from the

web
folder.

View

    <title>Angular PDF.js demo</title>
    <script src="bower_components/pdf.js-viewer/pdf.js"></script>
    <link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js"></script>
    <script src="app.js"></script>

    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .some-pdf-container { width: 100%; height: 100%; }
    </style>


    <div class="some-pdf-container">
        <pdfjs-viewer src="%7B%7B%20pdf.src%20%7D%7D"></pdfjs-viewer>
    </div>

Controller

angular.module('app', ['pdfjsViewer']);

angular.module('app').controller('AppCtrl', function($scope) { $scope.pdf = { src: 'example.pdf', }; });

Directive options

The

 directive takes the following attributes.

src

The source should point to the URL of a publicly available pdf. Note that the

src
must be passed in as an interpolation string.
$scope.pdf.src = "http://example.com/file.pdf";

data

In the case that you cannot simply use the URL of the pdf, you can pass in raw data as a Uint8Array object. The

data
attribute takes a scope variable as its argument.
$scope.data = null; // this is loaded async

$http.get("http://example.com/file.pdf", { responseType: 'arraybuffer' }).then(function (response) { $scope.pdf.data = new Uint8Array(response.data); });


scale

The

scale
attribute can be used to obtain the current scale (zoom level) of the PDF. The value will be stored in the variable specified. This is read only.


download, print, open

These buttons are by default all visible in the toolbar and can be hidden.



on-init

The

on-init
function is called when PDF.JS is fully loaded.
$scope.onInit = function () {
  // pdf.js is initialized
}

on-page-load

The

on-page-load
function is each time a page is loaded and will pass the page number. When the scale changes all pages are unloaded, so
on-page-load
will be called again for each page. If
onPageLoad()
returns
false
, the page will not be marked as loaded and
onPageLoad
will be called again for that page on the next (200ms) interval.
$scope.onPageLoad = function (page) {
    // page is loaded
};

Styling

The

 directive automatically expands to the height and width of its first immediate parent, in the case of the example 
.some-pdf-container
. If no parent container is given the html
body
will be used. Height and width are required to properly display the contents of the pdf.

Demo

You can test out a demo of this directive. You must run the node server first due to CORS. First make sure the dependencies are installed.

cd demo
npm install
bower install

Afterwards run the server like so.

node server.js

The server will be running on localhost:8080

Advanced configuration

By default the location of PDF.js assets are automatically determined. However if you place them on alternative locations they may not be found. If so, you can configure these locations.

You may disable using the Web Workers API. This is useful if you want to add pdf.worker.js to your concatenated JavaScript file. However this will have a negative effect on the runtime performance.

As part of your build process you might include all your library scripts within a concatenated Javascript file whilst excluding the pdf.worker.js file. Use setWorkerSrc() to point to the pdf.worker.js script.

angular.module('app').config(function(pdfjsViewerConfigProvider) {
  pdfjsViewerConfigProvider.setWorkerSrc("/assets/pdf.js-viewer/pdf.worker.js");
  pdfjsViewerConfigProvider.setCmapDir("/assets/pdf.js-viewer/cmaps");
  pdfjsViewerConfigProvider.setImageDir("/assets/pdf.js-viewer/images");

pdfjsViewerConfigProvider.disableWorker(); pdfjsViewerConfigProvider.setVerbosity("infos"); // "errors", "warnings" or "infos" });

Note that a number of images used in the PDF.js viewer are loaded by the

viewer.css
. You can't configure these through JavaScript. Instead you need to compile the
viewer.less
file as
lessc --global-var='pdfjsImagePath=/assets/pdf.js-viewer/images' viewer.less viewer.css

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.