kunder-pdf viewer is an angular directive that uses PDF.js to show PDF files inside your ionic app. It transforms the PDF data (a String in base64) to images and then adds them dinamically inside a custom div. It has zoom in, zoom out and scroll functionalities implemented by default.
- Install the bower component,a new folder should be created in your /lib.
bower install kunder-pdf-viewer
- Import the following files to your index.html.
<link rel="stylesheet" type="text/css" href="lib/kunder-pdf-viewer/pdfViewer.min.css">
<script src="lib/kunder-pdf-viewer/directives/pdfViewer.js"></script>
<script src="lib/kunder-pdf-viewer/dependencies/pdf.min.js"></script>
<script src="lib/kunder-pdf-viewer/dependencies/pdf.worker.min.js"></script>
- Include the pdfViewer module as a dependency when defining your angular app.
angular.module('myApp', ['kunder.pdfViewer,...'])- Declare the directive in the selected HTML file, here you should define your ideal scale (WARNING: for best performance keep it around 1.0) and the PDF data that should be transformed, be sure to have it as a String and loaded before the directive gets initialized.
<pdf-viewer scale="1.0" pdf-data="model.pdfData"></pdf-viewer> The directive also accepts "onScrollBottom" and "noScrollBottom" function parameters. "onScrollBottom" is called when the bottom end of the PDF is reached. "noScrollBottom" gets called after "onScrollBottom" is invoked and the user performs another scroll on the document.
<pdf-viewer onScrollBottom="iHitBottom()
noScrollBottom="iGetCalledAfterTheOtherOne()"
scale="1.0" pdf-data="model.pdfData"></pdf-viewer>`