Barcode.js功能強大的條碼生成jQuery插件

本文轉載自http://www.uedsc.com/barcode-js.html

 

Barcode.js是一個基於jQuery庫的插件，用於繪製條形碼或者二維碼，可以生成基於DIV+CSS或者Canvas等的條碼，該插件支持PHP，jQuery和JavaScript，解壓後對應3個目錄，每一個目錄下都有對應的例子能夠查看。

注意：須要繪製的條形碼/二維碼長度和字符串包含字母之類的，注意要選擇不一樣的條形碼/二維碼類型，要不沒法繪製（沒研究過條形碼，經測試視乎是這樣的）。建議直接選擇code128。

使用方法

一、同其餘jQuery插件同樣，只須要將jQuery框架和jquery.barcode.js文件引入頁面。

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

二、定義一個DOM對象做爲生成條形碼/二維碼的容器

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

三、使用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