The jQuery Barcode plugin generatse various barcode formats directly in the browser.
Plugin URL: http://barcode-coder.com/en/barcode-jquery-plugin-201.html
Supported barcode types include: ean8, ean13, std25, int25, code11, code39, code93, code128, codabar, msi, and datamatrix.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery-barcode.min.js"></script>
<style>
#barcode-container {
display: inline-block;
padding: 20px;
background: #fff;
}
</style>
</head>
<body>
<div id="barcode-container"></div>
<script>
$(document).ready(function() {
$('#barcode-container').barcode(
'4901234567890',
'ean13',
{
output: 'svg',
bgColor: '#ffffff',
color: '#000000',
barWidth: 2,
barHeight: 80,
addQuietZone: true
}
);
});
</script>
</body>
</html>
Configuration Parameters
| Parameter | Description | Default |
|---|---|---|
| output | Rendering method: css, bmp, svg, or canvas | css |
| bgColor | Background color of the barcode area | #FFFFFF |
| color | Barcode line color | #000000 |
| barWidth | Width of individual bars | 1 |
| barHeight | Height of bars | 50 |
| moduleSize | Size of barcode modules | 5 |
| showHRI | Display human-readable interpretation | true |
| addQuietZone | Include queit zones around barcode | true |
| marginHRI | Distance from bars to text | 5 |
| fontSize | Font size for HRI text | 10 |
| posX | Horizontal position offset | 0 |
| posY | Vertical position offset | 0 |
Complete Configuraton Example
var config = {
output: 'canvas',
bgColor: '#f5f5f5',
color: '#333333',
barWidth: 3,
barHeight: 100,
moduleSize: 8,
showHRI: true,
addQuietZone: true,
marginHRI: 10,
fontSize: 14
};
$('#target').barcode('ABC-123456', 'code128', config);
Code128 Implementation
$(function() {
$('#code-target').barcode('JQUERY-BARCODE-2024', 'code128', {
output: 'css',
color: '#0066cc',
barWidth: 1,
barHeight: 60,
showHRI: false
});
});