前端使用JsBarcode生成条形码

2020-03-21 阅读：3575 分类：前端标签： jquery

前端使用JsBarcode生成条形码

注：需引入 jsbarcode 插件

JsBarcode安装:

npm install jsbarcode --save
npm install jsbarcode

HTML 生成条形码代码

<!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="js/jquery.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('我是条形码');
  </script> 
 </body>
</html>

最终生成的条形码

Option	Default value	Type
format（选择要使用的条形码类型）	"auto" (CODE128)	String
width（设置条之间的宽度）	2	Number
height（高度）	100	Number
displayValue（是否在条形码下方显示文字）	true	Boolean
text （覆盖显示的文本）	undefined	String
fontOptions（使文字加粗体或变斜体）	""	String
font（设置文本的字体）	"monospace"	String
textAlign（设置文本的水平对齐方式）	"center"	String
textPosition（设置文本的垂直位置）	"bottom"	String
textMargin（设置条形码和文本之间的间距）	2	Number
fontSize（设置文本的大小）	20	Number
background（设置条形码的背景）	"#ffffff"	String (CSS color)
lineColor（设置条和文本的颜色）	"#000000"	String (CSS color)
margin（设置条形码周围的空白边距）	10	Number
marginTop（设置条形码上方的空白边距）	undefined	Number
marginBottom（设置条形码下方的空白边距）	undefined	Number
marginLeft（设置条形码左边的空白边距	undefined	Number
marginRight（设置条形码右边的空白边距）	undefined	Number
flat	false	Boolean
valid	function(valid){}	Funct