Posting Web tutorial after a long time with a lot of energy and possibilities. There would be few things in life which would be life changing and support you even in worst times, yes of course, my blog and readers are my supporters who support me throughout my journey.
Download
Why Pdf.js?
Pdf Js is awesome javascript library supported by Mozilla and Individual contributors to make the web a beautiful place to visit and get work done. So, Every browser is capable of viewing Pdf files and what is so special about the pdf.js library is you can control the pdf with Javascript code rendering, switching pages and even more. So, Developer has the ultimate power to control the pdf loaded from the server and rendering part in the client. PDF are awesome documents that are daily shared between business for invoices and business payment processing documents, official agreements, documentations even more possibilities.
Use cases:
When you're building an application that heavily depends on the pdf view to the customer and need to render as a part of the application, pdf js is right choice to go with it. Where you can control the contents of the pdfs with session maintenance (premium and free customers ), personalized pdf rendering.
Getting Started:
Integrating pdf.js into your web/mobile web application is straightway easy but requires knowledge about javascript promises. To write clean and remove callback-style code, Promises are introduced.
Integration:
Either you can use pre-build version or you can clone the source code from GitHub and try to build with gulp command. I prefer to build the Javascript library from source. If you want to use it directly you can refer pastebin reference code.
building process commands:
Make sure you have node.js installed in your system with sudo access. Open the shell and try to execute the commands. First of all clone the GitHub repo.
> cd <Pdf.js repo>
> npm install
> gulp generic
By running above commands, you can successfully build the source code into distribution code (dist) in the build directory. You can use this as javascript library importing it as a script.
Importing:
You can simply include the pdf.js in your script tag along with the pdf.worker.js file. Once it has been setup you need to write application logic based on your web application.
<head>
<title>Pdf.js Example Application | i-visionblog</title>
<script src="build/pdf.js"></script>
<script src="build/pdf.worker.js"></script>
<script src="js/app.js"></script>
</head>
So, this will import the whole pdf.js and its recommended to go for minified version while moving into production mode.
PDF.js API to render pdf:
pdf.js uses Ajax feature to load the pdf from the server. It reduces the memory footprint by loading the pdf by pagewise instead of loading all at a time. In fact, that's bad practice to load all pdf content at a time unless it is too important. PDF.js also uses a separate worker to download and render the content to Html DOM (document object model). We could getPage(index) method to load the page and use render() function to render the page in the Html DOM. It also uses Context to instruct the height, width, scale and element container to load. But it all works with promises to reduce the callback-style of coding. Here is sample javascript snippet to load all the pages into the canvas.
Final Words:
You can download the whole application project from here. The above code simply loads the pdf from the local server and then renders all pages into Html DOM as canvas images. It's up to you to devise your own event click listeners to load next and previous pages as per your application logic.
Hope you've liked this article. Subscribe for more tutorials and follow me in Google+/Facebook for updates. If you have any doubts chat with me or drop me a mail. Feel free to comment below. Share is care.
Hope you've liked this article. Subscribe for more tutorials and follow me in Google+/Facebook for updates. If you have any doubts chat with me or drop me a mail. Feel free to comment below. Share is care.
