JavaScript Barcode Font Encoders
- Generate barcodes with a single native JavaScript file and fonts such as WOFF Barcode Web Fonts.
- Supports Linear and 2D barcode symbologies including Code 128, GS1, Code 39, Codabar, MSI, ITF, USPS IMb, UPC, EAN, PDF417, Data Matrix & QR Code.
- Includes compressed and uncompressed source code.
- Compatible with HTML5, CSS, JQuery and supports optional HTML Element ID references.
- Supports JavaScript development environments including Visual Studio Code, WebStorm, Eclipse, NetBeans, jQuery, and Apache Cordova.
- Each symbology is provided in a single compressed JavaScript file to minimize file size and load times.
- Barcode options may be changed within the top of the referenced .js file or as function parameters.
- Includes advanced support for GS1, FNC1, ISBT, and HIBC.
- QR Code and Data Matrix include advanced support for encoding GS1 AIs, Auto Mode, and UTF8. QR Code also supports TLV Base64, Swiss QR-Bill, Center Override, and GS1 QR Code.
- Included with any Developer License to any of the IDAutomation Barcode Font Packages.
Index:
(JavaScript Font Encoders listed in Chart 1 are provided with all Developer License to any of the IDAutomation Barcode Font Packages.)
JavaScript Integration
The JavaScript Font Encoders listed in Chart 1 are provided with a developer license to any of the IDAutomation Barcode Font Packages.
- Extract the files from the compressed zip file.
- Several files are provided for different barcode types (Symbologies)
and purposes. Use the file that represents
the symbology that is needed. This tutorial will use the Code 128 symbology,
which is in the file named
IDAutomation_Uni_C128.js.
HTML example files are also provided and may be referred to as necessary.
Two files are also provided for various purposes:- symbology.js - the primary compressed file to use in production.
- symbology.uncompressed.js - the uncompressed source code of the primary file.
- Open the application or IDE where the barcode is to be integrated.
- Add the following line at the top of the file just before the
</head>
line to load the appropriate JavaScript file:
<script language="JavaScript" src="IDAutomation_Uni_C128.js"></script>
- Add a script where the barcode is to appear, which is the file name
without the ".js":
<script type="text/javascript"> document.write(IDAutomation_Uni_C128(DataToEncode)) </script>
- Modify "DataToEncode" to equal what is to be encoded in the
barcode. This may be accomplished with a variable, a
dynamically generated webpage, or another product such as JQuery, which
is used in this code example:
<div id="Barcode_Font"> </div> <script type="text/javascript"> $(document).ready(function() { $("#encode").click(function(e) { barcodetext = $("#datatoencode").val(); $("#Barcode_Font").html(IDAutomation_Uni_C128(barcodetext)); }); }); </script>
JQuery is also used with the HRI object from this product in the GS1 Element String HRI Verification Tool. - Display the result with the required
barcode font to generate the correct barcode. This may be
accomplished using CSS and Web Fonts or using CSS with locally installed
fonts. For example, the following CSS and HTML format data to the font:
<script language="JavaScript" src="IDAutomation_Uni_C128.js"></script> <style type="text/css"> .barcodefont1 {font-family: "IDAutomation Uni M", "IDAutomationGS1 46"; font-size: 200%; } </style> ... <span class="barcodefont1"> <script type="text/javascript"> document.write(IDAutomation_Uni_C128("www.idautomation.com")) </script> </span> ...
- Print or display the result to verify that the barcode is generated. If a scanner is needed to verify barcodes, IDAutomation offers several barcode scanners. It is normal to view some distortion of the barcode on the screen because of low screen resolution. However, the barcodes should be accurate when printed or viewed on high-resolution screens.
JavaScript Encoders & Required Barcode Fonts
Chart 1. Available JavaScript Font Encoders.
Linear Font Encoders | ||
Barcode Type | JavaScript Font Encoder | Required Font |
Code-128 (Auto Mode) | IDAutomation_Code128.js | IDAutomationC128 |
Code-128 Sets | IDAutomation_Code128a.js IDAutomation_Code128b.js IDAutomation_Code128c.js |
IDAutomationC128 |
Code-39 | IDAutomation_Code39.js, IDAutomation_Code39Mod43.js | IDAutomationC39 |
Code-93 | IDAutomation_Code93.js | IDAutomationC93 |
Codabar | IDAutomation_Codabar.js | IDAutomationCB |
EAN-13 | IDAutomation_EAN13.js | IDAutomationUPCEAN |
EAN-8 | IDAutomation_EAN8.js | IDAutomationUPCEAN |
Interleaved 2 of 5 | IDAutomation_ITF.js, IDAutomation_ITFMod10.js | IDAutomationI25 |
UPC-A | IDAutomation_UPCa.js | IDAutomationUPCEAN |
UPC-E | IDAutomation_UPCe.js | IDAutomationUPCEAN |
USPS IntelligentMail (IMb) | IDAutomation_USPS_IMb.js |
IDAutomationPOSTNET or IDAutomationIMB |
not applicable | IDAutomation_SpliceText.js | not applicable |
not applicable | IDAutomation_GS1_HRI.js | not applicable |
Universal, GS1, and DataBar Font Encoders | ||
Barcode Type | JavaScript Font Encoder | Required Font |
Code-128 | IDAutomation_Uni_C128.js, IDAutomation_Uni_C128a.js, IDAutomation_Uni_C128b.js, IDAutomation_Uni_C128c.js |
IDAutomation_Uni or IDAutomation_GS1 |
Code-39 | IDAutomation_Uni_C39.js |
IDAutomation_Uni or IDAutomation_GS1 |
Codabar | IDAutomation_Uni_Codabar.js |
IDAutomation_Uni or IDAutomation_GS1 |
Interleaved 2 of 5 | IDAutomation_Uni_ITF.js |
IDAutomation_Uni or IDAutomation_GS1 |
MSI / Plessey | IDAutomation_Uni_MSI.js |
IDAutomation_Uni or IDAutomation_GS1 |
USPS IntelligentMail | IDAutomation_USPS_IMb.js | IDAutomation_Uni |
2D Font Encoders | ||
Barcode Type | 2D Function Methods | Notes | Required Font |
Data Matrix | IDAutomation_DataMatrix.js | IDAutomation2D or IDAutomationDMatrix |
QR-Code | IDAutomation_QRCode.js | IDAutomation2D |
PDF417 | IDAutomation_PDF417.js | IDAutomation2D or IDAutomationPDF417 |
Barcode Properties
Barcode properties may be modified within the top of the referenced .js file or by a function parameter.
Top of the .js file Example:
Function Parameter Example:
The following is an explanation of popular properties:
- ApplyTilde - Processes the tilde character for special functions such as encoding functions, encoding ASCII characters directly, or generating GS1-128, GS1-DataMatrix, or GS1-QRCode symbols.
- IDElement - is an optional parameter that can place
the returned image into the referenced div id element.
<div id="html5_barcode_font"></div>
...
<script type="text/javascript">
document.write(IDAutomation_Uni_C128.js("123456789012",'html5_barcode_font'));
</script> - HTML - returns <br> for carriage returns in 2D symbologies when set to "1", this is the default setting. Set to "0" to use CR & LF for carriage returns.
- GS1 Encoding Options - The FNC1 may be encoded with ~202 or the ASCII 202 character Ê in GS1-128 and with ~1 in GS1-DataMatrix or GS1-QRCode when the tilde option is enabled. The FNC1 may also be encoded by surrounding the AI in parentheses.
- HRI Options - When using
IDAutomation_GS1_HRI.js, multiple GS1 fixed-length element strings are
automatically displayed.
Examples:
GS1-128 encoding: ~20201095011010209171719050810ABCD1234
GS1-DataMatrix encoding: ~101095011010209171719050810ABCD1234
- Tilde Options -
enabling ApplyTilde or ProcessTilde will allow the following calculation options where ??
is the number of digits before the tilde to include in the calculation:
- ~m?? calculates a MOD10 check character, commonly
used for GS1.
Example: ~2020000801234999999999~m17
Encodes: (00) 008012349999999997 - ~f?? calculates a MOD43 check character, commonly
used for HIBC.
Example: +A123BJC5D6E71~f14
Encodes: +A123BJC5D6E71G - ~i?? calculates a MOD37-2 check character,
commonly used for ISBT.
Example: G123412654321~i13
Encodes: G123412654321L - ~k?? calculates a MOD37-2 check character in
brackets, commonly used for ISBT manual entry. This option will not
encode the check character within the barcode.
Example: G123412654321~k13
Encodes: G123412654321 [L]
- ~m?? calculates a MOD10 check character, commonly
used for GS1.
(JavaScript Font Encoders listed in Chart 1 are provided with any Developer License to any of the IDAutomation Barcode Font Packages.)
Support
Free product support may be obtained by reviewing the knowledgebase articles documented below and by searching the resolved public forum threads. Priority phone, email, and forum support are also provided via several contact methods within 30 days of purchase. Support after this complimentary period may be received with an active one-year Level 2 Support & Upgrade Subscription for the corresponding font package.