Barcode.js 功能强大的条码生成 jQuery 插件

Question

Barcode.js 是一个基于 jQuery 库的插件，用于绘制条形码或者二维码，能够生成基于 DIV+CSS 或者 Canvas 等的条码，该插件支持 PHP、jQuery 和 JavaScript，解压后对应3个目录，每个目录下都有对应的例子可以查看。

注意：需要绘制的条形码/二维码长度和字符串包含字母之类的，注意要选择不同的条形码/二维码类型，要不无法绘制（没研究过条形码，经测试视乎是这样的）。建议直接选择 code128。

使用方法

1、同其他 jQuery 插件一样，只需要将 jQuery 框架和 jquery.barcode.js 文件引入页面。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.barcode.js"></script>

2、定义一个DOM对象作为生成条形码/二维码的容器

<div id="bcTarget"></div>

3、使用jQuery选择器调用barcode()方法绘制条形码/二维码

$("#bcTarget").barcode("1234567890128", "ean13");

根据输入字符的长度来生成对应的条形码

function genCode(){
    var encode = "ean8";
    if(8 === $("#exam_no").text().length) encode = "ean8";
    else if(11 === $("#exam_no").text().length) encode = "code11";
    else if(13 === $("#exam_no").text().length) encode = "ean13";
    $("#code_b").barcode($("#exam_no").text(), encode, {barWidth: 2, barHeight: 50});
    $("#code_s").barcode($("#exam_no").text(), encode, {barWidth: 1, barHeight: 50});
    $("#code_b div").css('background-color', '#eee');
}

参数说明

jquery对象扩展方法barcode参数说明：barcode: function(datas, type, settings)

datas参数支持2种类型

• string：要绘制的条形码字符串内容（依赖于条形码的类型）。如果条形码类型能容纳这些字符，并且存在校 验不是强制性的，字符串的ISE将会自动计算（原文：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)：条形码类型

注意要根据字符串长度来选择条形码的编码方式，生成的条形码默认是DIV+CSS形式的，后面的barWidth和barHeight是生成参数，默认是70X70的正方形，后面的参数可以调整条形码的比例，但不能调整大小

• 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)：条形码样式的配置

配置名称	类型	默认值	描述	限制
barWidth	int	1	条形码宽度	1D
barHeight	int	50	容器高度	1D
moduleSize	int	5	largeur / hauteur d'un module	2D
showHRI	bool	true	是否显示条形码内容（方便识别）
bgColor	text	#FFFFFF	背景色
color	text	#000000	条形码颜色
fontSize	int	10	显示的条形码内容字体大小
output	text	css	如何绘制条形码： css, svg, bmp, canvas，注意svg，bmp，canvas不支持IE，最好不用

renderer : canvas
Parameter	Type	Default value	Detail
posX	int	0	X origine
posY	int	0	Y origine

相关链接

• 官网：http://barcode-coder.com/en/
• Github地址：https://github.com/jbdemonte/barcode