Displaying a part of a pdf page and reading Acroforms with pdf.js

Introduction

pdf.js is simply put a PDF reader in pure HTML5/Javascript developed by Mozilla Labs.
It allows you to display pdfs in your webpages without requiring an external plugin but instead drawing the pdf to an HTML5 canvas.
This way, it is possible to directly interact with the pdf using Javascript.
In this article we will provide an example of using this library: we will render a pdf page and add controls to zoom in on the acroform fields contained within the rendered page.
In order to do this we need to solve two different tasks: we need to be able to render a pdf page with a specific x,y offset and we need to be able to read basic acroform field info.

Note: pdf.js needs many HTML5 features, so browsers that are not HTML5 compliant are not supported too well.
pdf.js notably does not work on IE8 since this browser is very weak on the HTML5 side.
For more info on browser compatibility, check the “What browsers are supported?” questions from the pdf.js FAQ.

Using the library

The first one is to start with importing the viewer that comes as an example with the pdf.js distribution.
It consists of 3 files – viewer.js, viewer.html and viewer.css – which implement a full pdf viewer.
This implementation uses all features of the pdf.js library, from basic to advanced.
If you want to embed a full pdf viewer in your page, it is probably best to start from this example and remove and add features as necessary.

What it comes down to is that it is not so difficult to read the basic acroform fields info using the getAnnotations method provided by the pdf.js API.
For example, the following variant of the Acroforms example prints all acroform field type, key and position info to the Javascript console:

We also put the snippet on JSBin. However, we do not have a web server which allows cross-origin requests, so we cannot reference a pdf with actual Acroforms in this snippet.

In order to run the snippet, you will need to execute it from a web server of your own on which you deploy a sample pdf with Acroforms such as this one.

What the snippet does is displaying a particular page of a pdf, reading the acroforms for this page and then adding an element to a select box for each acrofield that was found.
When one of the elements of the select box is clicked, it positions the page so the field for which the element was clicked is in the upper left corner of the pdf display.

Compliments to Mozilla Labs for pdf.js

Mozilla Labs did an awesome job at developing pdf.js.
It is a very interesting and useful Javascript library.

However, better Acroforms support would make it even more useful.

In particular, we would like:

A way of getting all appearance states for select boxes and checkbox acroform fields from the API.

A way of setting the value of an acroform field on the pdf and rerendering it so the field is filled.

Currently, the API does not provide a way to do this(something like item.fieldValue = 'test' currently has no effect on the rendered pdf since these items are not taken into account at all when rendering a pdf).