Simple Example of angular pdf viewer using pdf.js

This tutorial help to add a pdf viewer in angularjs application using pdf.js library.PDF.js is a very popular and lightweight JavaScript utility for parsing and rendering PDFs.

We are using angular directive angularjs-pdf to view pdf file in angular application, which is internally using pdf.js JavaScript library to create angular directive. The directive embeds the full viewer, which allows you to scroll through the pdf file.

Angular pdf main features are:

• Supports next/previous page button on pdf view
• You can add zoom in / out / fit 100% view
• Support retina canvas
• Rotate clockwise
• Jump to a specific page number
• The PDF viewer head section is fixed during scrolling
• Define the view template
• You can define the path to pdf with the scope variable
• handles error
• Show loading of pdf
• Show progress percentage of loading pdf
• Insert password for protected PDFs
• Dynamically change the pdf URL
• Set authorization or HTTP headers

You can also check other tutorials of pdf viewer,

• PDFObject : Embedded PDF viewer using HTML5
• Exporting a DataTable into PDF File
• Popular JavaScript and jQuery PDF Viewer Plugins

The angularjs-pdf uses images, translations and such are being loaded from the web folder, so please make sure all the pdf sources will have in your web folder.

How to view pdf file Angular Application Using PDF.js

We will demonstrate about the integration of the angular pdf viewer directive with your angularjs application.We will create a sample d:/test_app angular application and stored all pdfs files which we want to show in angular pdf viewer,

I am using the following files and folder

We will create and modify changes in the below angularjs files.

• /app folder : This folder will contains all controllers and view HTML file.
• /assets folder : This folder will contains all third-party library files and images.
• app.js : This file is our main application entry point and contains base controller.
• index.html : This file will use to load pdf view.

We need to download pdf.js library files and extract it, Now moved following files into your angularjs application.

1. Move images folder from pdf.js folder to d:/test_app/assets/ folder.
2. Move pdf.js, pdf-worker pdf.js file to d:/test_app/assets/ folder.

We also will download angularjs-pdf angular module and extract it.We will copy angular-pdf.min.js and put into d:/test_app/assets/ folder.

Step 1: We will create app.js file and base controller.

TestApp = angular.module('TestApp', ['TestApp.controllers']);
TestApp.controller('testController', function($scope) {
});

As you can see above angular script, I have created testController a controller for our main angularjs controller.

Step 2: We will create index.html file that includes all pdf.js and angular directive files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="assets/pdf.js"></script>
<script src="assets/angular-pdf.min.js"></script>
<script src="app.js"></script>
</pre>
<strong>Step 3:</strong> injected <code>'pdf'</code> dependency with in angularjs application like below and paste url of sample pdf file.
<pre>TestApp = angular.module('TestApp', ['TestApp.controllers', 'pdf']);
TestApp.controller('testController', function($scope) {
  $scope.pdfUrl = 'assets/sample.pdf';
	$scope.pdfName = 'test';
	$scope.scroll = 0;
	$scope.loading = 'loading';

	$scope.getNavStyle = function(scroll) {
		if(scroll &gt; 100) return 'pdf-controls fixed';
		else return 'pdf-controls';
	}

	$scope.onError = function(error) {
		console.log(error);
	}

	$scope.onLoad = function() {
		$scope.loading = '';
	}

	$scope.onProgress = function (progressData) {
		console.log(progressData);
	};
});

Step 3: injected 'pdf' dependency with in angularjs application like below and paste URL of a sample pdf file.

TestApp = angular.module('TestApp', ['TestApp.controllers', 'pdf']);
TestApp.controller('testController', function($scope) {
  $scope.pdfUrl = 'assets/sample.pdf';
	$scope.pdfName = 'test';
	$scope.scroll = 0;
	$scope.loading = 'loading';

	$scope.getNavStyle = function(scroll) {
		if(scroll > 100) return 'pdf-controls fixed';
		else return 'pdf-controls';
	}

	$scope.onError = function(error) {
		console.log(error);
	}

	$scope.onLoad = function() {
		$scope.loading = '';
	}

	$scope.onProgress = function (progressData) {
		console.log(progressData);
	};
});

I have 'assets/sample.pdf' pdf file path added with pdfUrl a variable.

Step 4: Created viewer.html file into app/partials/ folder and paste the below code.

<nav ng-class="getNavStyle(scroll)">
  <button ng-click="goPrevious()"><span>&lt;</span></button>
  <button ng-click="goNext()"><span>&gt;</span></button>

  <button ng-click="zoomIn()"><span>+</span></button>
  <button ng-click="fit()"><span>100%</span></button>
  <button ng-click="zoomOut()"><span>-</span></button>

  <button ng-click="rotate()"><span>90</span></button>

  <span>Page: </span>
  <input type="text" min="1" ng-model="pageNum">
  <span> / {{pageCount}}</span>

  &nbsp;&nbsp;
  <span>Document URL: </span>
  <input type="text" ng-model="pdfUrl">
</nav>

<hr>

{{loading}}
<canvas id="pdf" class="rotate0"></canvas>

Step 5: Added pdf container which will use to load pdf files, We need to add below code into index.html file.

<div class="container">
<h1>Welcome in angularjs PDF viewer</h1>
<div class="wrapper">&nbsp;</div>
</div>

Step 6: We will add some CSS to make the pdf viewer UI elegant in the head section of index.html file.

*{box-sizing: border-box;}
.wrapper {margin: 0 auto; width: 960px; }
.pdf-controls { width: 100%; display: block; background: #eee; padding: 1em;}
.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); }
.fixed { position: fixed; top: 0; left: calc(50% - 480px); z-index: 100; width: 100%; padding: 1em; background: rgba(238, 238, 238,.9); width: 960px; }

Conclusion

We have created a simple pdf viewer using angularjs and pdf.js. I am using angularjs-pdf directive to view the online pdf view in angularjs application. You can add more features into angularjs pdf viewer like pagination on pdf, loading bar, scrolling and zoom-in etc.

You can download source code and Demo from below link.