HTML5


An Evolution of the Most Widely used Technology in the World.


Marketplace

A collection of components and scripts based on HTML5.

HTML5

Tutorials and references on the HyperText Markup Language 5.

Javascript

Tutorials and references on the Javascript language.

CSS

Tutorials and references on Cascading Style Sheet.



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.

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

   <script type="text/javascript" src="js/external/jquery-1.4.2.min.js">
   <script type="text/javascript" src="js/jsLabel2PDF.js">
   <script type="text/javascript" src="js/external/base64.js">
   <script type="text/javascript" src="js/external/sprintf.js">
	  

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.

<script>
jQuery.CreateTemplate("inches",8.268,11.693,0.3815,0.5965,2.5,1.5,7,3,0.0,0.0);
jQuery.CreateLabel();
jQuery.AddText(0.8,0.8,'jsLabel2PDF',12);
jQuery.AddText(0.9,0.60,'USD$99.90',10);
jQuery.DrawPDF();
</script>
	  
The parameters used for creating the template are described below.

API Functions

CreateTemplate

AddText

Inside the API Functions

CreateTemplate

The CreateTemplate function simply stores the parameters of the label templates for rendering the PDF file. This function also converts the parameters in inches or mm to PDF point units.

	if (units="inches")
	{
		_paperWidthPt = paperWidth * (72);
		_paperHeightPt = paperHeight * (72);
		_marginLeftPt = marginLeft * (72);
		_marginTopPt = marginTop * (72);
		_labelWidthPt = labelWidth * (72);
		_labelHeightPt = labelHeight * (72);
       		_horizontalSpacePt=horizontalSpace * (72);
       		_verticalSpacePt= verticalSpace*(72);
	}
	  

CreateLabel

The CreateLabel function will be used to create or initialize objects in the label immediately without any further function calls in the next version.

AddText

The AddText function stores all the text parameters in an array to be used when the final PDF file is rendered.

        if (units="inches")
	{
                _textXArry[_textCounter]=x*72;
                _textYArry[_textCounter]=y*72;
 
	}
	else if (units="mm")
	{
                _textXArry[_textCounter]=x*(72/25.4);
                _textYArry[_textCounter]=y*(72/25.4);
	}
        _textArry[_textCounter]='';
        _textArry[_textCounter] = _textArry[_textCounter]+str;
        _fontSizeArry[_textCounter] = fontSize;
        _textCounter = _textCounter + 1;
	  

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.

	$.DrawPDF = function()
	{
	setupVersion();
	setupFonts();
	setupXObject();
	setupResources();
        setupPage();
	setupPages();
	setupOutlines();
	setupCatalog();
	setupTrailer();
	document.location.href = 'data:application/pdf;base64,'
	 + Base64.encode(pdfoutput);
	};
	  
The Javascript code for setting a label template using a PDF page to render multiple XObject labels, is shown below for reference purposes.

function setupPage() 
{
	objCounter=objCounter+1;
	byteArry[objCounter]=pdfoutput.length;
	pageCounter=pageCounter+1;
	pageNumbersArry[pageCounter]=objCounter;
	pdfoutput = pdfoutput+objCounter+' 0 obj' + '\n';
	pdfoutput = pdfoutput+'<< /Type /Page' + '\n';
	pdfoutput = pdfoutput+'/Parent '+ (objCounter+2*numberOfPages) 
			+' 0 R' + '\n';
	pdfoutput = pdfoutput+'/MediaBox [0 0 ' + _paperWidthPt 
			+ ' ' + _paperHeightPt + ']' + '\n';
	pdfoutput = pdfoutput+'/Contents '+(objCounter+1)+' 0 R' + '\n';
	pdfoutput = pdfoutput+'/Resources ' + resourcesNumber 
			+ ' 0 R' + '\n';
	pdfoutput = pdfoutput+'>>' + '\n';
	pdfoutput = pdfoutput+'endobj' + '\n';
	objCounter=objCounter+1;
	byteArry[objCounter]=pdfoutput.length;
	pdfoutput = pdfoutput+objCounter+' 0 obj' + '\n';
	streamoutput='';
	//Loop to setup each label using XObject
	//Loop to setup each label using XObject
	//Loop to setup each label using XObject
        for (var y=0;y<_numRows;y++)
	{		
            for (var x=0;x<_numColumns;x++)
            {		
               streamoutput = streamoutput+'/lm' + y + x + ' Do' + '\n';
            }
        }	
	//End Loop to setup each label using XObject
	//End Loop to setup each label using XObject
	//End Loop to setup each label using XObject
	pdfoutput = pdfoutput+'<< /Length ' + streamoutput.length 
			+ ' >>' + '\n';
	pdfoutput = pdfoutput+'stream'  + '\n';
	pdfoutput = pdfoutput+streamoutput;
	pdfoutput = pdfoutput+'endstream'  + '\n';
	pdfoutput = pdfoutput+'endobj' + '\n';
	return "";
}
	  

Test Run

Generate PDF Label now

Download

jsLabel2PDF.zip - v0.1

License

General Public License (GPL)

Browsers Supported

Browsers Support Coming Soon


The World Wide Web and Applications Revolution.


Copyright © 2010-2013 html5marketplace.com. All Rights Reserved.

Valid HTML 4.01 Strict

http://www.barcoderesource.com