I was developing a Kiosk app recently for a company and one of the major requirement was ability to show pdf documents. Kiosk app was based on the SharePoint and it was really usefull to show documents from SharePoint document library. Unfortunately, Windows 8 wasn’t shipped with out of the box PDF viewer to render PDFs, what made me feel to search for other software products to be integrated in my app. But…we all know that many things have been change since Windows 8 faced customers and all these changes came into Windows 8.1. One of those good features was PDF API and in this post I will show you how I used that new PDF API to create a Custom Side Panel to render a PDF document inside a FlipView control.

Let’s start. First create an empty Windows Store App project using JavaScript.

Now we are going to add simple button to trigger panel to be displayed on the right side of the screen.

default.html

I have created two classes PDF and SidePanel. PDF class is responsible for handling API of PDF rendering and displaying. SidePanel class will handle creation of Panel and

displaying List of documents.

The logic for the panel is following: User click on the button to show Panel.The Panel will be transitioned from the right side. When user tap on the document, the Panel will be extended

to show the document. After user close the document the Panel should collapse to show again list of available documents.

Here are screenshots:

Here is complete code:

default.html

PDF.js

SidePannel.js

PS. There are some discussions about how to zoom in/zoom out using pinch. In my case I have Kiosk app which is running on the big screen and I can survive with scrollable

view inside FlipView control. But for Tablets there is a requirement to make zoom feature properly. PDF API actually extracts images from PDF and there are no ways for now how to render arrray of pages at the same time, or at least I couldn’t find a way. So,to make zoom possible you need to track gesture of user interaction and after apply zoom factor for the page you are trying to zoom.

Here is a source code for complete solution:

link

Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">