JS條形碼(一維碼)插件JsBarcode用法詳解【編碼類型、參數(shù)、屬性】

更新時間：2017年04月19日 11:13:40 作者：niuniuasb

這篇文章主要介紹了JS條形碼(一維碼)插件JsBarcode用法,較為詳細的分析了條形碼插件JsBarcode編碼類型、參數(shù)、屬性等相關功能、使用方法與注意事項,需要的朋友可以參考下

本文實例講述了JS條形碼插件JsBarcode用法。分享給大家供大家參考，具體如下：

這里介紹一下在GitHub生成條形碼的js插件→JsBarcode

條碼支持的有:

CODE128
CODE128 (自動模式切換)
CODE128 A/B/C (強制模式)
EAN
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
CODE39
ITF-14
MSI
MSI10
MSI11
MSI1010
MSI1110
Pharmacode
Codabar

代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
 <title></title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 <script type="text/javascript" src="js/JsBarcode.all.js"></script>
 </head>
 <body>
 <svg id="svgcode"></svg>
 <!-- or -->
 <canvas id="canvascode"></canvas>
 <!-- or -->
 <img id="imgcode" />
 <script>
  $("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");
  $("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");
  $("#imgcode").JsBarcode("I'm huangenai!");//or JsBarcode("#imgcode", "I'm bwju!");
 </script>
 </body>
</html>

JsBarcode 我們還可以設置條碼的一些屬性（可設置屬性詳細介紹鏈接：https://github.com/lindell/JsBarcode/wiki/Options）

<img />
<script>
JsBarcode("#imgcode", "123", {
 format: "CODE39",//選擇要使用的條形碼類型
 width:3,//設置條之間的寬度
 height:100,//高度
 displayValue:true,//是否在條形碼下方顯示文字
 text:"456",//覆蓋顯示的文本
 fontOptions:"bold italic",//使文字加粗體或變斜體
 font:"fantasy",//設置文本的字體
 textAlign:"left",//設置文本的水平對齊方式
 textPosition:"top",//設置文本的垂直位置
 textMargin:5,//設置條形碼和文本之間的間距
 fontSize:15,//設置文本的大小
 background:"#eee",//設置條形碼的背景
 lineColor:"#2196f3",//設置條和文本的顏色。
 margin:15//設置條形碼周圍的空白邊距
});
</script>

GitHub：https://github.com/lindell/JsBarcode
條碼生成器：http://lindell.me/JsBarcode/generator/
JsBarcode示例與設置：http://codepen.io/lindell/pen/mPvLXx?editors=1010
簡單的JsBarcode演示：http://codepen.io/lindell/pen/eZKBdO?editors=1010