Aurelia Tutorial PDF Version

relia is a modern, open source UI framework for web and mobile app development. It allows you to write clean, modular JavaScript. The framework follows simple conventions and is focused on web standards.


This tutorial is designed for developers who didn't have a chance to work with this framework before. The tutorial contains simple, easily understandable examples. These examples can be used as a reference for future projects.


Since Aurelia is promoting pure JavaScript, you will need to know the language prior to learning the framework. We will use EcmaScript2016 syntax. You will also need to have previous experience working with HTML.

Handling PDF files within a web application has always been painful to deal with. If you’re lucky, your users only need to download the file. Sometimes, though, your users need more. In the past, I’ve been lucky, but this time, our users needed our application to display a PDF document so they could save metadata related to each individual page. Previously, one might have accomplished this with an expensive PDF plugin, such as Adobe Reader, running inside the browser. However, with some time and experimentation, I found a better way to integrate PDF viewers in a web application. Today, we’ll take a look at how we can simplify PDF handling, using Aurelia and PDF.js.

Overview: The Goal

Our goal, today, is to build a PDF viewer component in Aurelia that allows two-way data flow between the viewer and our application. We have three main requirements.
  1. We want the user to be able to load the document, scroll, and zoom in and out, with decent performance.
  2. We want to be able to two-way-bind viewer properties (such as the current page, and the current zoom level) to properties in our application.
  3. We want this viewer to be a reusable component; we want to be able to drop multiple viewers into our application simultaneously with no conflicts and little effort.
You can find the code for this tutorial on our GitHub repo, as well as a demo of the finished code

Post a Comment