JS 生成条形码（一维码）jsBarcode

Posted 2023-03-31 最凶残的小海豹

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 生成条形码（一维码）jsBarcode相关的知识，希望对你有一定的参考价值。

jsBarcode 官网

一、安装

script 引入

<script src="JsBarcode.all.min.js"></script>

地址：https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js
也可以进官网查看地址。

npm方式
安装：

npm install jsbarcode --save

页面引入：

import JsBarcode from "jsbarcode";

二、使用

html部分加入svg容器

<svg id="barcode"></svg>

JS 代码部分

JsBarcode("#barcode", "Hi world!");

三、结果

参数设置（options）

option	默认值	类型	说明
format	“auto” (CODE128)	String	条形码的类型
width	2	Number	每个条条的宽度，注意这里不是指整个条形码的宽度
height	100	Number	整个条形码的宽度
displayValue	true	Boolean	是否显示条形码下面的文字
fontOptions	“”	String	设置条形码文本的粗体和斜体样式 bold / italic / bold italic
font	“monospace”	String	设置条形码显示文本的字体
textAlign	“center”	String	条形码文本的水平对齐方式，和css中的类似： left / center / right
textPosition	“bottom”	String	条形码文本的位置 bottom / top
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	整个条形码的右边距
valid	function(valid)	Function	执行完条形码的一个回调函数，正确true 错误false

options 使用方法

let options = 
  fontSize: 12,
  background: "#cccccc"
;
JsBarcode("#barcode", "Hi world!", options);

生成条形码插件条形码--JsBarcode

每天学习一点点编程PDF电子书免费下载： http://www.shitanlife.com/code

介绍一下在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 huangenai!");  
  </script> 
 </body>
</html>

JsBarcode 我们还可以设置条码的一些属性（可设置属性详细介绍链接：https://github.com/lindell/JsBarcode/wiki/Options）

  <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>