JS条形码(一维码)JsBarcode插件用法详解和使用说明

前端 5个月前 达西克
2,221 0 0

什么是JsBarcode

JsBarcode是一个可以通过前端js直接进行打印条形码的插件

条码支持

使用方法

CDN地址: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js

代码

<img id="imgcode" />
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//设置条形码周围的空白边距
});

参数介绍

参数 默认值 类型
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
valid function(valid){} Function

实现效果

JS条形码(一维码)JsBarcode插件用法详解和使用说明
阿里云爆款特惠服务器
版权声明:达西克 发表于 2022年 9月 18日 pm7:01。
转载请注明:JS条形码(一维码)JsBarcode插件用法详解和使用说明 | 达西克

相关文章

暂无评论

暂无评论...