Javascript

CSS

HTML Templates

Javascript Libraries

Javascript and PDF for Label Printing

Printing mailing labels is a task that we perform frequently both at work and at home. The process typically involves choosing the different physical labels available off the shelf,
use of a label software or Microsoft Office (Mail Merge) to design the layout of the labels, and finally, specifying the different objects like names, addresses, prices and description on the label. Most software provides the What You See Is What You Get (WYSIWG) capability to ease this entire process.

jsLabel2PDF Open Source Project

This open source project involves the use of Javascript to generate labels using Portable Document Format (PDF). The initial stages focus on providing a Javscript API to allow the specification of labels and label templates that will ultimately be generated on a PDF. The advantage of using a PDF file ia that it allows these labels to look the same on different platforms. On top of that, users have the advantage of sharing the PDF files and allowing others to print the labels without the need to install any software. The aim of the project is to integrate with a WYSIWYG web application in the future and to facilitate the generation of PDF labels with minimal software installation.

Smart and Self-Contained Labels

The second stage of the project focuses on creating smart and self-contained labels. More often than not, users require the creation of labels that automatically increment the serial number of each subsequent label. Or labels where the format and layout remain the same but the product name and price changes during print time. The aim is for the jsLabel2PDF library to create PDF files that support this capability of generating different data at print time.

Using the jsLabel2PDF Library

This section describes the use of the jsLabel2PDF library, which is a working demo now. This first version supports template definition, adding text and a single page PDF generation. PDF version 1.4 is selected as the baseline for the PDF generation. However, the aim is to allow the PDF files to be used on as many platforms as possible.

What this project depends on

The jsLabel2PDF library uses the following open source libraries. These libraries will need to be included in the web page that uses jsLabel2PDF.

jQuery (GPL or MIT License)

base64 (MIT License?)

sprintf (MIT License)

The table below shows how to include all the necessary files to use the jsLabel2PDF library in a HTML web page.

Using the jsLabel2PDF API

After including the libraries described above, the next step is to make use of the Application Programming Interface (API) provided by jsLabel2PDF. The following Javascript code shows how to create labels and generate them in PDF. The general flow is to create a label template which specifies the number of labels on a page, the margins, the size of the labels and space between the labels. After defining the template, a label can be created so that objects such as text or (in future) images can be added. The next step is to draw text objects on specific locations of the label. Finally, the PDF file is generatedby calling the DrawPDF function. The label objects are automatically populated in the specified template specified and a working PDF file is generated on the fly.

DrawPDF

The DrawPDF function renders the PDF file. The PDF version, fonts and resources are first setup followed by the pages of the PDF file. In jsLabel2PDF, each label is represented by a PDF XObject while the label template is represented by a PDF page. The final output is encoded in base 64 and plugged into the browser using the HTML "datauri" capability.