快捷導(dǎo)航

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

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

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

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

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

條碼支持的有:

CODE128
CODE128 (自動(dòng)模式切換)
CODE128 A/B/C (強(qiáng)制模式)
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 我們還可以設(shè)置條碼的一些屬性（可設(shè)置屬性詳細(xì)介紹鏈接：https://github.com/lindell/JsBarcode/wiki/Options）

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

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