-
-
+
```
-The `scale` attribute can be used to obtain the current scale (zoom level) of the PDF. This is read only.
-
-The directive takes the following optional attributes to modify the toolbar
-
- download="false" print="false" open="false"
-
-Omitting these attributes will by default show the options in the toolbar.
-
-The `on-init` function is called when PDF.JS is fully loaded. 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.
-
-**Controller**
+### Controller
```js
angular.module('app', ['pdfjsViewer']);
@@ -74,28 +50,100 @@ angular.module('app').controller('AppCtrl', function($scope) {
$scope.pdf = {
src: 'example.pdf',
};
-
- $scope.$watch('scale', function() {
- ...
- });
-
- $scope.onInit = function() {
- ...
- };
-
- $scope.onPageLoad = function(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._
+## Directive options
+The `
` directive takes the following attributes.
-## 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.
+#### `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.
+
+```html
+
+```
+
+```javascript
+$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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) object.
+The `data` attribute takes a scope variable as its argument.
+
+```html
+
+```
+
+```javascript
+$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**.
+
+```html
+
+```
+---
+
+#### `download, print, open`
+These buttons are by default all visible in the toolbar and can be hidden.
+
+```html
+
+```
+---
+
+#### `on-init`
+The `on-init` function is called when PDF.JS is fully loaded.
+
+```html
+
+```
+
+```javascript
+$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._
+
+```html
+
+```
+
+```javascript
+$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](https://github.com/legalthings/angular-pdfjs-viewer/tree/master/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
@@ -108,7 +156,6 @@ Afterwards run the server like so.
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.
@@ -129,4 +176,3 @@ Note that a number of images used in the PDF.js viewer are loaded by the `viewer
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
-
diff --git a/bower.json b/bower.json
index 051c975..634c192 100644
--- a/bower.json
+++ b/bower.json
@@ -15,7 +15,7 @@
},
"dependencies": {
"angular": "^1.5.8",
- "pdf.js-viewer": "~1.6.210"
+ "pdf.js-viewer": "~1.6.211"
},
"ignore": [
"**/.*",
diff --git a/demo/app.js b/demo/app.js
index 761cc20..3638aeb 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -1,7 +1,25 @@
angular.module('app', ['pdfjsViewer']);
-angular.module('app').controller('AppCtrl', function($scope) {
+angular.module('app').controller('AppCtrl', function ($scope, $http, $timeout) {
+ var url = 'example.pdf';
+
$scope.pdf = {
- src: 'example.pdf'
+ src: url, // get pdf source from a URL that points to a pdf
+ data: null // get pdf source from raw data of a pdf
};
+
+ getPdfAsArrayBuffer(url).then(function (response) {
+ $scope.pdf.data = new Uint8Array(response.data);
+ }, function (err) {
+ console.log('failed to get pdf as binary:', err);
+ });
+
+ function getPdfAsArrayBuffer (url) {
+ return $http.get(url, {
+ responseType: 'arraybuffer',
+ headers: {
+ 'foo': 'bar'
+ }
+ });
+ }
});
diff --git a/demo/bower.json b/demo/bower.json
index 2d95c56..ffafe14 100644
--- a/demo/bower.json
+++ b/demo/bower.json
@@ -5,6 +5,6 @@
"private": "true",
"dependencies": {
"angular": "^1.5.8",
- "pdf.js-viewer": "~1.6.210"
+ "pdf.js-viewer": "~1.6.211"
}
}
diff --git a/demo/index.html b/demo/index.html
index bab0a92..50b4530 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -28,7 +28,14 @@