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

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)：條形碼樣式的配置

相關鏈接

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

《轉載》Barcode.js功能強大的條碼生成jQuery插件