Creating a PDF reader application with Monaca and PDF.js
This article explains how to use the PDF.js-library with Monaca and shows how to build a simple PDF reader application with it. The application lists the loaded files as thumbnails and opens a file in a new window when its thumbnail is clicked. The file can be read in the window and the pages are changed with arrow buttons or by swiping the screen. The whole source code is in the Github repository.
PDF.js
PDF.js is a JavaScript library that can be used to render PDF-documents on an HTML5-canvas element. Originally, it was created as an extension for Firefox, but nowadays it is used more widely in other browsers and applications like Google Chrome and Slack. In the sample PDF reader application, PDF.js is used to create a thumbnail for every PDF-file and to show the file when the thumbnail is clicked. To learn more about PDF.js, you can check the examples on its repository.
Prerequisites and running the application
To start programming the application, you should have an account in Monaca. You will also need Monaca CLI and Node.js installed on your computer. Install Monaca CLI and log in it by running these commands:
npm install -g monaca
monaca loginTo run the application, install it first by running the following commands:
git clone https://github.com/AnniLotta/PDF-reader.git
cd PDF-reader
npm installRun the application by using this command:
monaca previewCreating the application from scratch
To create a new application with name ‘PDF-reader’, run this command:
monaca create PDF-readerMonaca CLI will ask you to choose a category and a template. Choose JavaScript and then any template using Framework7. A new application will be created with a ready template. You can see it by going to the application folder and running:
monaca previewSource code structure
The code that implements the functionalities and styling of the application is in these folders:
css: the code for styling.js: the JavaScript files. The app.js file has the code for creating the application and pdf-reader.js handles functionalities like loading and rendering the PDF-files.index.html: The only HTML-file of the application.sampleFiles: the files that will be shown in the application.
In order to be able to use PDF.js library, the application needs its source code. For that, download the code from here and add the folder pdfjs to the project.
The application will also need some Framework7 icons that are not installed automatically. Follow the instructions on in the Framework7 icons repository to add them in the application.
Thumbnails on the main page
As the application has only one page, it also has only one HTML-file. The PDF-file thumbnails are shown on this main page.
To start using PDF.js, it has to be set up. Some error handling is added as PDF.js is not supported on old versions of some browsers. We also define the path to the sampleFiles folder and the file names in it:
The thumbnails are created in the function createThumbnails. It does it by loading a file, rendering its first page on a canvas and creating an image of that canvas. Then the function creates an HTML-element of the created image and adds it to the HTML-code. Also some information of the PDF is included in the thumbnail. As PDF.js uses promises to load the file data, the function must be asynchronous and wait for the data to be loaded before continuing.
Opening and reading a PDF
Opening a PDF happens almost the same way as creating a thumbnail. The main difference is that instead of making an image of the first page, the function renderPage renders the page on the popup window in index.html and leaves it there until the page is changed. The popup opens when a thumbnail is clicked as we added the class popup-open to the thumbnail and linked it to the popup withdata-popup="#pdf-popup".
Turning the pages of a PDF is done by the function changePage. It sets the arrow buttons in the window and puts the page in a rendering queue with the function queueRenderPage. The queue takes care of that the function renderPage doesn’t try to render two pages at the same time.
Finally, to call the function to change pages, the application has to detect clicks and swipes on the arrow buttons and the canvas. This is done by the functions detectArrowClicks and detectCanvasGestures. Clicks on the arrow buttons are detected with basic JavaScript event listeners.
For gestures on the canvas, the application uses a library called Hammer. The library helps in detecting actions on a device screen. In detectCanvasGestures, it is used to detect swipes, pinches, taps and drags on the canvas. With these gestures you can change the page of the open file, zoom it and move around it.
As zooming in and out by pinching the screen is possible only on a mobile device, a function for zooming on a PC is needed. The function zoom is called when the + and - buttons are clicked on the open file. restrictZoom is used to restrict the user from zooming too much in or out.
Conclusion
This article explained how to create a simple PDF reader app by using PDF.js-library. The whole source code can be seen in the Github repository. Feel free to study it on your own if there was something the article did not cover well.
