angular-pdf
An AngularJS directive
ng-pdf
to display PDF files with PDFJS.
demo]
Overview [Integrate PDF files right into web pages.
Requirements
Check package.json
file for dependencies and their versions:
- AngularJS - get the latest angular.min.js
- PDFJS - build the files
pdf.js
andpdf.worker.js
- Evergreen browsers
Features
- 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
-
Install or copy over the file
dist/angular-pdf.min.js
ordist/angular-pdf.js
npm install angular-pdf --saveor
bower install angular-pdf --save
-
Include the path to the directive file in
index.html
-
Include the directive as a dependency when defining the angular app:
var app = angular; -
Include the directive with the attribute path to the partial under a controller
-
scale
as an optionscale
attribute can also bepage-fit
-
page
as an option for initial page number -
usecredentials
as an option to add credentials / authorization -
debug
to enable debugging console output (optional, disabled by default)
-
-
Include the
canvas
element to display the pdf in the template-url file -
Include the path to the pdf file in the controller
app; -
Set custom headers, e.g. authorization headers with
$scope.httpHeaders
optionapp;
Options
- Next / Previous page: Include the controls in the view file as defined in the attribute
template-url
<button ng-click="goPrevious()"><</span></button>
<button ng-click="goNext()">></span></button>
-
Zoom in / out / fit 100%: Include the controls in the view file as defined in the attribute
template-url
<button ng-click="zoomIn()">+</span></button> <button ng-click="fit()">100%</span></button> <button ng-click="zoomOut()">-</span></button>
-
Rotate clockwise: Include the controls in the view file as defined in the attribute
template-url
and the initial classrotate0
90...include the css styles:
-
Jump to page number: Include the controls in the view file as defined in the attribute
template-url
Page: / {{pageCount}} -
Fixed pdf controls upon scrolling: Wrap the controls in the view file as defined in the attribute
template-url
with a tagnav
with anng-class
. Amend the scroll amount as required....And include the relevant css styles as required:
-
open the file
index.html
with a web server
When url is base64 or Uint8Array
Create a Blob:
currentBlob = result type: 'application/pdf';$scopepdfUrl = URL;
Handle error
In the controller, you can call the function $scope.onError
:
$scope { // handle the error // console.log(error);}
Show loading
In the controller, you can call the function $scope.onLoad
when the pdf succesfully loaded:
$scopeloading = 'loading'; $scope { // do something when pdf is fully loaded // $scope.loading = '';}
Show progress percentage
In the controller, you can call the function $scope.onProgress
$scope { // handle a progress bar // progress% = progress.loaded / progress.total // 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 { // 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};
Variations
- If using with Angular UI modal,
pageNum
attribute is no longer required. Checkout the implementation
Similar projects
- angular-pdf-viewer - a more self-contained directive
Credit
PDF example used is Relativity: The Special and General Theory by Albert Einstein as kindly organized and made available free by Project Gutenberg.
Contribute
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 CONTRIBUTING.md
for details.
Versioning
This repository follows the Semantic Versioning guidelines:
-
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