{"_id":"@bastienmoulia/angular-pdfjs-viewer","_rev":"1-6400afb46a6a3d757af5c5e33f7e862d","name":"@bastienmoulia/angular-pdfjs-viewer","description":"Embed PDF.js viewer into your angular application","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bastienmoulia/angular-pdfjs-viewer","description":"Embed PDF.js viewer into your angular application","version":"1.0.0","dependencies":{},"license":"MIT","main":"dist/angular-pdfjs-viewer.js","devDependencies":{"grunt":"^0.4.5","grunt-replace":"^0.10.2"},"_id":"@bastienmoulia/angular-pdfjs-viewer@1.0.0","_npmVersion":"5.2.0","_nodeVersion":"8.1.2","_npmUser":{"name":"bastienmoulia","email":"bmoulia@gmail.com"},"dist":{"integrity":"sha512-t/PfHMlxd1P0ie+X8f3tu6mhIFqjsA+Oq91JkE4NTK0KV0J12WHPZKoIYwfFhLyamYWs5iylTWVvMz1Lc2lggw==","shasum":"691c52b80d9532e00c0f32e85f876b6d6c0d7def","tarball":"https://registry.npmjs.org/@bastienmoulia/angular-pdfjs-viewer/-/angular-pdfjs-viewer-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBCqNIF5GXKNaa/zd2ApfMS5CVbgGgWtNp5fvtM5GFnjAiBX14iaKO5ko1jmigpW15ybQib5iM+ZMA72uZPUtsXkRQ=="}]},"maintainers":[{"name":"bastienmoulia","email":"bmoulia@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-pdfjs-viewer-1.0.0.tgz_1503568708114_0.9497367618605494"}}},"readme":"# PDF.js viewer Angular directive\n\nEmbed Mozilla's [PDF.js](https://mozilla.github.io/pdf.js/) viewer into your angular application, maintaining that look and feel\nof pdf's we all love. The directive embeds the [full viewer](https://mozilla.github.io/pdf.js/web/viewer.html), which\nallows you to scroll through the pdf.\n\n\n![viewer-example](https://cloud.githubusercontent.com/assets/5793511/24605022/6dd5abee-1867-11e7-881a-0d68dc7c77f3.png)\n\n\n## Installation\n     bower install angular-pdfjs-viewer --save\n\n## Usage\nBelow you will find a basic example of how the directive can be used.\nNote that the order of the scripts matters. Stick to the order of dependencies as shown in the example below.\nAlso note that images, translations and such are being loaded from the `web` folder.\n\n### View\n```html\n<!DOCTYPE html>\n<html ng-app=\"app\" ng-controller=\"AppCtrl\">\n    <head>\n        <title>Angular PDF.js demo</title>\n        <script src=\"bower_components/pdf.js-viewer/pdf.js\"></script>\n        <link rel=\"stylesheet\" href=\"bower_components/pdf.js-viewer/viewer.css\">\n\n        <script src=\"bower_components/angular/angular.js\"></script>\n        <script src=\"bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js\"></script>\n        <script src=\"app.js\"></script>\n\n        <style>\n          html, body { height: 100%; width: 100%; margin: 0; padding: 0; }\n          .some-pdf-container { width: 100%; height: 100%; }\n        </style>\n    </head>\n    <body>\n        <div class=\"some-pdf-container\">\n            <pdfjs-viewer src=\"{{ pdf.src }}\"></pdfjs-viewer>\n        </div>\n    </body>\n</html>\n```\n\n### Controller\n```js\nangular.module('app', ['pdfjsViewer']);\n\nangular.module('app').controller('AppCtrl', function($scope) {\n    $scope.pdf = {\n        src: 'example.pdf',\n    };\n});\n```\n\n## Directive options\nThe `<pdfjs-viewer>` directive takes the following attributes.\n\n\n#### `src`\nThe source should point to the URL of a publicly available pdf.\nNote that the `src` must be passed in as an interpolation string.\n\n```html\n<pdfjs-viewer src=\"{{ $ctrl.src }}\"></pdfjs-viewer>\n```\n\n```javascript\n$scope.src = \"http://example.com/file.pdf\";\n```\n---\n\n#### `data`\nIn the case that you cannot simply use the URL of the pdf, you can pass in raw data as\na [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) object.\nThe `data` attribute takes a scope variable as its argument.\n\n```html\n<pdfjs-viewer data=\"$ctrl.data\"></pdfjs-viewer>\n```\n\n```javascript\n$scope.data = null; // this is loaded async\n\n$http.get(\"http://example.com/file.pdf\", {\n    responseType: 'arraybuffer'\n}).then(function (response) {\n    $scope.data = new Uint8Array(response.data);\n});\n```\n---\n\n#### `scale`\nThe `scale` attribute can be used to obtain the current scale (zoom level) of the PDF.\nThe value will be stored in the variable specified. **This is read only**.\n\n```html\n<pdfjs-viewer scale=\"$ctrl.scale\"></pdfjs-viewer>\n```\n---\n\n#### `download, print, open`\nThese buttons are by default all visible in the toolbar and can be hidden.\n\n```html\n<pdfjs-viewer download=\"false\" print=\"false\" ... ></pdfjs-viewer>\n```\n---\n\n#### `on-init`\nThe `on-init` function is called when PDF.JS is fully loaded.\n\n```html\n<pdfjs-viewer on-init=\"$ctrl.onInit()\"></pdfjs-viewer>\n```\n\n```javascript\n$scope.onInit = function () {\n  // pdf.js is initialized\n}\n```\n---\n\n#### `on-page-load`\nThe `on-page-load` function is each time a page is loaded and will pass the page number.\nWhen the scale changes all pages are unloaded, so `on-page-load` will be called again for each page.\n_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._\n\n```html\n<pdfjs-viewer on-page-load=\"$ctrl.onPageLoad()\"></pdfjs-viewer>\n```\n\n```javascript\n$scope.onPageLoad = function (page) {\n    // page is loaded\n};\n```\n---\n\n## Styling\nThe `<pdfjs-viewer>` directive automatically expands to the height and width of its first immediate parent, in the case of the example `.some-pdf-container`.\nIf no parent container is given the html `body` will be used. Height and width are required to properly display the contents of the pdf.\n\n## Demo\nYou can test out a [demo](https://github.com/legalthings/angular-pdfjs-viewer/tree/master/demo) of this directive.\nYou must run the node server first due to CORS. First make sure the dependencies are installed.\n\n    cd demo\n    npm install\n    bower install\n\nAfterwards run the server like so.\n\n    node server.js\n\nThe server will be running on localhost:8080\n\n## Advanced configuration\nBy default the location of PDF.js assets are automatically determined. However if you place them on alternative\nlocations they may not be found. If so, you can configure these locations.\n\nYou may disable using the [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).\nThis is useful if you want to add pdf.worker.js to your concatinated JavaScript file. However this will have a\nnegative effect on the runtime performance.\n\n    angular.module('app').config(function(pdfjsViewerConfigProvider) {\n      pdfjsViewerConfigProvider.setWorkerSrc(\"/assets/pdf.js-viewer/pdf.worker.js\");\n      pdfjsViewerConfigProvider.setCmapDir(\"/assets/pdf.js-viewer/cmaps\");\n      pdfjsViewerConfigProvider.setImageDir(\"/assets/pdf.js-viewer/images\");\n      \n      pdfjsViewerConfigProvider.disableWorker();\n      pdfjsViewerConfigProvider.setVerbosity(\"infos\");  // \"errors\", \"warnings\" or \"infos\"\n    });\n\nNote that a number of images used in the PDF.js viewer are loaded by the `viewer.css`. You can't configure these\nthrough JavaScript. Instead you need to compile the `viewer.less` file as\n\n    lessc --global-var='pdfjsImagePath=/assets/pdf.js-viewer/images' viewer.less viewer.css\n","maintainers":[{"name":"bastienmoulia","email":"bmoulia@gmail.com"}],"time":{"modified":"2022-04-04T17:47:21.604Z","created":"2017-08-24T09:58:29.809Z","1.0.0":"2017-08-24T09:58:29.809Z"},"license":"MIT","readmeFilename":"README.md"}