js生成條形碼——JsBarcode

時間 2019-12-12

原文原文鏈接

原文地址：http://www.javashuo.com/article/p-yqpbpoox-bb.htmljavascript

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

條碼支持的有:java

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
Codabarjquery

代碼git

<!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 huangenai!");  
  </script> 
 </body>
</html>

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

 <img id="imgcode" />        
  <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>