<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="bcTarget"></div>
<!--
JQuery plugin : barcode
Version : 2.0.3
Licence : GPL / Cecill
Date : 2013-01-06
Author: DEMONTE Jean-Baptiste, HOUREZ Jonathan
Download barcode jQuery plugin 2.0.3
Barcode JQuery plugin installation
Like any plugin, just inclure the source file after including that of jQuery.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>
Using barcode JQuery plugin
To use this plugin, symply define a Container th host the visuel barcode
<div id="bcTarget"></div>
<div id="bcTarget"></div>
Using example of the plugin
$("#bcTarget").barcode("1234567890128", "ean13");
$("#bcTarget").barcode("1234567890128", "ean13");
Prototype of the barcode function
barcode: function(datas, type, settings)
barcode: function(datas, type, settings)
datas
string
Value barcode (dependent on the type of barcode)
If barcode type include it, the presence of the checksum is not mandatory, it ise automatically recalculated
object
type : ean8, ean13, code11, code39, code128, codabar
member Type
code string
type : std25, int25, code93
member Type
code string
crc boolean
type : msi
member Type
code string
crc boolean
object crc1 : string("mod10", "mod11")
crc2 : string("mod10", "mod11")
type : datamatrix
member Type
code string
rect boolean (default : false)
type (string)
codabar
code11 (code 11)
code39 (code 39)
code93 (code 93)
code128 (code 128)
ean8 (ean 8)
ean13 (ean 13)
std25 (standard 2 of 5 - industrial 2 of 5)
int25 (interleaved 2 of 5)
msi
datamatrix (ASCII + extended)
settings (object)
visual configuration of the barcode
Parameter Type Default value Detail Limitation
barWidth int 1 width of a bar 1D
barHeight int 50 container height 1D
moduleSize int 5 largeur / hauteur d'un module 2D
showHRI bool true display text (HRI : Human readable Interpretation)
bgColor text #FFFFFF background color
color text #000000 barcode color
fontSize int 10 font size of the HRI
output text css output type : css, svg, bmp, canvas
renderer : canvas
Parameter Type Default value Detail
posX int 0 X origine
posY int 0 Y origine
Example :
<input type="button" onclick='$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});' value="ean13">
<input type="button" onclick='$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});' value="ean13">
1234567890128
<input type="button" onclick='$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});' value="int25">
<input type="button" onclick='$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});' value="int25">
12345670
<input type="button" onclick='$("#bcTarget3").barcode({code: "1234567", crc:false}, "int25",{barWidth:2, barHeight:30});' value="int25 without crc">
<input type="button" onclick='$("#bcTarget3").barcode({code: "1234567", crc:false}, "int25",{barWidth:2, barHeight:30});' value="int25 without crc">
-->
</body>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-barcode.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#bcTarget").barcode("1234567890", "int25");
</script>
</html>
用了这个插件发现一个弊端，如果条形码的长度不是统一的，那么无法控制它的宽度，就导致在手机端会出现滚动条，非常恶心。如果规格统一的我觉得用这个插件还是蛮好的 比较清晰。如果是第一种情况的话 建议用https://github.com/lindell/JsBarcode 选择 <img id="barcode"/>这种模式即可