npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-pdfjs-viewer

v2.0.1

Published

Embed PDF.js viewer into your angular application

Downloads

2,132

Readme

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.

viewer-example

Installation

 bower install angular-pdfjs-viewer --save
 npm install angular-pdfjs-viewer --save

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

<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
    <head>
        <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>
    </head>
    <body>
        <div class="some-pdf-container">
            <pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
        </div>
    </body>
</html>

Controller

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

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

Directive options

The <pdfjs-viewer> 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.

<pdfjs-viewer src="{{ $ctrl.src }}"></pdfjs-viewer>
$scope.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.

<pdfjs-viewer data="$ctrl.data"></pdfjs-viewer>
$scope.data = null; // this is loaded async

$http.get("http://example.com/file.pdf", {
    responseType: 'arraybuffer'
}).then(function (response) {
    $scope.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.

<pdfjs-viewer scale="$ctrl.scale"></pdfjs-viewer>

download, print, open

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

<pdfjs-viewer download="false" print="false" ... ></pdfjs-viewer>

on-init

The on-init function is called when PDF.JS is fully loaded.

<pdfjs-viewer on-init="$ctrl.onInit()"></pdfjs-viewer>
$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.

<pdfjs-viewer on-page-load="$ctrl.onPageLoad()"></pdfjs-viewer>
$scope.onPageLoad = function (page) {
    // page is loaded
};

Styling

The <pdfjs-viewer> 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 concatinated JavaScript file. However this will have a negative effect on the runtime performance.

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