A barcode (also bar code) is a visual, machine-readable representation of data; the data usually describes something about the object that carries the barcode.

You can use Ax.barcode library to generate barcodes in different formats.

1 PDF417

PDF417 is a stacked linear barcode symbol format used in a variety of applications; primarily transport, identification cards, and inventory management. PDF stands for Portable Data File. The 417 signifies that each pattern in the code consists of bars and spaces, and that each pattern is 17 units long. The PDF417 symbology was invented by Dr. Ynjiun P. Wang at Symbol Technologies in 1991. (Wang 1993) It is ISO standard 15438.

Copy
<script>
    var graph = new Ax.barcode.PDF417("ABCabc123");
    var image = graph.toPNG();
    new Ax.io.File("/tmp/sample.png").write(image);
</script>
ABCabc123.png

2 QRCode

QR code (abbreviated from Quick Response code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently; extensions may also be used.

The QrCode library includes the following features:

  • Supports encoding all 40 versions (sizes) and all 4 error correction levels, as per the QR Code Model 2 standard
  • Output formats: SVG XML string, PNG, Raw modules/pixels of the QR symbol.
  • Detects finder-like penalty patterns more accurately than other implementations
  • Encodes numeric and special-alphanumeric text in less space than general text
  • Encodes Japanese Unicode text in kanji mode to save a lot of space compared to UTF-8 bytes
  • Computes optimal segment mode switching for text with mixed numeric/alphanumeric/general/kanji parts

Copy
<script>
    var qrcode = new Ax.barcode.QrCode("Hello, world!");
    new Ax.io.File("/tmp/qrcode1.png").write(qrcode.toPNG());
    new Ax.io.File("/tmp/qrcode1.svg").write(qrcode.toSVG());
</script>

2.1 Setting encoding quality

There are 4 encoding levels, LOW, MEDIUM, QUARTILE, HIGH. Default is MEDIUM.

Copy
<script>
    var text = `
Alice was beginning to get very tired of sitting by her sister on the bank,
and of having nothing to do: once or twice she had peeped into the book her sister was reading,
but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice
'without pictures or conversations?' So she was considering in her own mind (as well as she could,
for the hot day made her feel very sleepy and stupid), whether the pleasure of making a
daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly
a White Rabbit with pink eyes ran close by her.
`;

    var qrcode = new Ax.barcode.QrCode(text, "HIGH");
    new Ax.io.File("/tmp/qrcode2.png").write(qrcode.toPNG());
    new Ax.io.File("/tmp/qrcode2.svg").write(qrcode.toSVG());
</script>

3 SVG barcodes

You can generate SVG barcodes for

  • UPC A
  • UPC E
  • EAN 13
  • 3of9
  • Code 128

3.1 UPC A

The Universal Product Code (UPC) is a barcode symbology that is widely used in the United States, Canada, United Kingdom, Australia, New Zealand, in Europe and other countries for tracking trade items in stores.

Copy
<script>
    var svg = new Ax.barcode.SVG("042100005264");
    console.log(svg.toUPCA());
</script>
UPC A

3.2 UPC E

To allow the use of UPC barcodes on smaller packages, where a full 12-digit barcode may not fit, a 'zero-suppressed' version of UPC was developed, called UPC-E, in which the number system digit, all trailing zeros in the manufacturer code, and all leading zeros in the product code, are suppressed (omitted).

This symbology differs from UPC-A in that it only uses a 6-digit code, does not use M (middle) guard pattern, and the E (end) guard pattern is formed as space-bar-space-bar-space-bar, i.e. UPC-E barcode follows the pattern SDDDDDDE. The way in which a 6-digit UPC-E relates to a 12-digit UPC-A, is determined by UPC-E numerical pattern and UPC-E parity pattern.

Copy
<script>
    var svg = new Ax.barcode.SVG("425261");
    console.log(svg.toUPCE());
</script>
UPC E

3.3 EAN 13

The International Article Number (also known as European Article Number or EAN) is a standard describing a barcode symbology and numbering system used in global trade to identify a specific retail product type, in a specific packaging configuration, from a specific manufacturer. The standard has been subsumed in the Global Trade Item Number standard from the GS1 organization; the same numbers can be referred to as GTINs and can be encoded in other barcode symbologies defined by GS1. EAN barcodes are used worldwide for lookup at retail point of sale, but can also be used as numbers for other purposes such as wholesale ordering or accounting.

The most commonly used EAN standard is the thirteen-digit EAN-13, a superset of the original 12-digit Universal Product Code (UPC-A) standard developed in 1970 by George J. Laurer. An EAN-13 number includes a 3-digit GS1 prefix (indicating country of registration or special type of product). A prefix with a first digit of "0" indicates a 12-digit UPC-A code follows. A prefix with first two digits of "45" or "49" indicates a Japanese Article Number (JAN) follows.

The less commonly used 8-digit EAN-8 barcode was introduced for use on small packages, where EAN-13 would be too large. 2-digit EAN-2 and 5-digit EAN-5 are supplemental barcodes, placed on the right-hand side of EAN-13 or UPC. These are generally used for periodicals like magazines or books, to indicate the current year's issue number; and weighed products like food, to indicate the manufacturer's suggested retail price.

Copy
<script>
    var svg = new Ax.barcode.SVG("5449000000996");
    console.log(svg.toEAN13());
</script>

3.4 Code 39

Code 39 (also known as Alpha39, Code 3 of 9, Code 3/9, Type 39, USS Code 39, or USD-3) is a variable length, discrete barcode symbology.

The Code 39 specification defines 43 characters, consisting of uppercase letters (A through Z), numeric digits (0 through 9) and a number of special characters (-, ., $, /, +, %, and space). An additional character (denoted '*') is used for both start and stop delimiters. Each character is composed of nine elements: five bars and four spaces. Three of the nine elements in each character are wide (binary value 1), and six elements are narrow (binary value 0). The width ratio between narrow and wide is not critical, and may be chosen between 1:2 and 1:3.

Copy
<script>
    var svg = new Ax.barcode.SVG("*WIKIPEDIA*");
    console.log(svg.setPrintText(true).to3of9());
</script>
Code 39 *WIKIPEDIA*

3.5 Code 128

ode 128 is a high-density linear barcode symbology defined in ISO/IEC 15417:2007. It is used for alphanumeric or numeric-only barcodes. It can encode all 128 characters of ASCII and, by use of an extension symbol (FNC4), the Latin-1 characters defined in ISO/IEC 8859-1.

Copy
<script>
    var svg = new Ax.barcode.SVG("RI 476 394 652 CH");
    console.log(svg.setPrintText(true).toCode128());
</script>
Code 128 RI 476 394 652 CH

4 PDF barcodes

The following example shows a javascript code that will use FOP processor to generate a a series of EAN13 barcodes in a 65 labels A4 document.

Copy
<script>


// ============================================================================
// Simple barcode generation in a PDF document using SVG barcodes
// cols  : number of columns in PDF
// width : width of pdf label
// height: height of pdf label
// svgs  : array of svg lables to print
// ============================================================================
function getPDFBarcodes(ncols, width, height, svgs)
{
	var fop_begin = `
<fo:root xmlns:fo='http://www.w3.org/1999/XSL/Format'>
    <fo:layout-master-set>
		<!-- A4 master page with 1cm margins -->
        <fo:simple-page-master master-name='main' page-height='29.7cm' page-width='21cm' font-family='sans-serif' margin-top='0cm' margin-bottom='0cm' margin-left='0cm' margin-right='0cm' reference-orientation='0'>
            <fo:region-body margin='1cm' background-color='white' border='solid' border-color='red' />
            <fo:region-before extent='1cm' background-color='white' border='none'/>
            <fo:region-after extent='1cm' background-color='white' border='none'/>
            <fo:region-start extent='1cm' background-color='white' border='none'/>
            <fo:region-end extent='1cm' background-color='white' border='none'/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference='main'>
      <fo:flow flow-name='xsl-region-body'>
	`;	
	
	var fop_end = `
      </fo:flow>
   </fo:page-sequence>
</fo:root>
	`;
	
	// ========================================================================
    // A4(21.0cm) = 1cm + 19cm + 1cm
	// ========================================================================
	var pagewidh = 19.0;
	
	var fop = fop_begin;
	fop += "      <fo:table>\n";
	for (idx = 0; idx < ncols; idx++) {
        fop += "       <fo:table-column column-width='" + (pagewidh / ncols) + "cm'/>\n";
	}
	
	fop += "       <fo:table-body>\n";
	for (idx = 0; idx < svgs.length; idx++) {
		var svg = svgs[idx];
		if (idx % ncols == 0) {
			if (idx > 0)
				fop += "      </fo:table-row>\n";
			fop += "      <fo:table-row border-style='solid' border-width='0.5pt'>\n";
		}
	    fop += "       <fo:table-cell border-style='solid' border-width='0.5pt'>\n";
	    fop += "        <fo:block text-align='center'><fo:instream-foreign-object content-width='" + width + "cm'>" + svg + "</fo:instream-foreign-object></fo:block>\n";
	    fop += "       </fo:table-cell>\n";
	}
	fop += "        </fo:table-row>\n";
	fop += "       </fo:table-body>\n";
	fop += "      </fo:table>\n";
	fop += fop_end;
	var pdf = new Ax.fop.Processor().transform(fop);
	return pdf;
}

//============================================================================
// 65 per page
//============================================================================
function getPDFBarcodes65PerPage()
{
	// A4 ( 65:5x13 labels per page) h = 27.7 / 13 : ex: APLI 38.0mm x 21.2mm
	var ncols  = 5;
	// Notice you need to adjust height to match bounding box for label
	// The height is always less than label height due to margins or text areas
	var width  = 3.8;	// width  in cm (  38.0mm)
	var height = 1.322; // height in cm (< 21.2mm) need to fit 13 rows per page

	var svgs = [];
	for (idx = 0; idx < 65; idx++) {
		//var svg = new Ax.barcode.SVG("*WIKIPEDIA* " + idx).setHeight(height).setPrintText(true).to3of9();
		var svg = new Ax.barcode.SVG("5449000000996").setHeight(height).toEAN13();
		svgs.push(svg);
	}

	return getPDFBarcodes(ncols, width, height, svgs);
}


//============================================================================
// 189 per page
//============================================================================
function getPDFBarcodes189PerPage()
{
	// A4 (189:7x24 labels per page) h = 27.7 / 24 : ex: APLI 25.4mm x 10.0mm
	var ncols  = 7;
	// Notice you need to adjust height to match bounding box for label
	// The height is always less than label height due to margins or text areas
	var width  = 2.54;	// width  in cm (  25.4mm)
	var height = 0.675; // height in cm (< 10.0mm) need to fit 24 rows per page

	var svgs = [];
	for (idx = 0; idx < 189; idx++) {
		//var svg = new Ax.barcode.SVG("*WIKIPEDIA* " + idx).setHeight(height).setPrintText(true).to3of9();
		var svg = new Ax.barcode.SVG("5449000000996").setHeight(height).toEAN13();
		svgs.push(svg);
	}

	return getPDFBarcodes(ncols, width, height, svgs);
}

// ========================================================================
// Generate a barcode example
//
// A4 (29.7 x 21 cm) (- 1cm margins) = (27.7 x 19 cm available)
// A4 ( 65:5x13 labels per page) h = 27.7 / 13 : ex: APLI 38.0mm x 21.2mm
// A4 (189:7x24 labels per page) h = 27.7 / 24 : ex: APLI 25.4mm x 10.0mm
// ========================================================================


var pdf = getPDFBarcodes65PerPage();
new Ax.io.File("/tmp/barcodes65.pdf").write(pdf);
var pdf = getPDFBarcodes189PerPage();
new Ax.io.File("/tmp/barcodes189.pdf").write(pdf);

</script>