LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【Javascript】引用JsBarcode插件纯JS生成一维码(参数介绍)

admin
2023年6月3日 22:41 本文热度 437

<html>

<head>

<script src="jquery-2.1.1.min.js"></script>

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

</head>

<body>

<svg id="svg_barcode"></svg>

<!-- or -->

<canvas id="canvas_barcode"></canvas>

<!-- or -->

<img id="img_barcode"/>

<script>

$("#svg_barcode").JsBarcode('Hi!');  //或 JsBarcode("#svg_barcode", "Hi!");

$("#canvas_barcode").JsBarcode('Hello world!');  // JsBarcode("#canvas_barcode", "Hello world!");

$("#img_barcode").JsBarcode("I'm huangenai!");  // JsBarcode("#img_barcode", "I'm bwju!");

</script>

</body>

</html>


option默认值类型说明
format"auto" (CODE128)String条形码的类型
width2Number每个条条的宽度,注意这里不是指整个条形码的宽度
height100Number整个条形码的宽度
displayValuetrueBoolean是否显示条形码下面的文字
fontOptions""String设置条形码文本的粗体和斜体样式 bold / italic / bold italic
font"monospace"String设置条形码显示文本的字体
textAlign"center"String条形码文本的水平对齐方式,和css中的类似: left / center / right
textPosition"bottom"String条形码文本的位置 bottom / top
textMargin2Number条形码文本 和 条形码之间的间隙大小
fontSize20Number设置条形码文本的字体大小
background"#ffffff"String (CSS color)整个条形码容器的背景颜色
lineColor"#000000"String (CSS color)条形码和文本的颜色
margin10Number整个条形码的外面距
marginTopundefinedNumber整个条形码的上边距
marginBottomundefinedNumber整个条形码的下边距
marginLeftundefinedNumber整个条形码的左边距
marginRightundefinedNumber整个条形码的右边距
validfunction(valid){}Function执行完条形码的一个回调函数,正确true 错误false


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


高级用法:

JsBarcode("#img_code", "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//设置条形码周围的空白边距

});


简化用法只加上需要特别说明的参数):

JsBarcode("#img_code", "Hello", {format: "code39"});


JsBarcode("#img_code", "Hi!", {

  fontSize: 40,

  background: "#4b8b7f",

  lineColor: "#ffffff",

  margin: 40,

  marginLeft: 80

});


JsBarcode("#img_code", "Hi!", {

  textAlign: "left",

  textPosition: "top",

  font: "cursive",

  fontOptions: "bold",

  fontSize: 40,

  textMargin: 15,

  text: "Special"

});


JsBarcode("#img_code", "1234", {

  format: "pharmacode",

  displayValue: false,

  height: 50,

  width: 6

});


附件:JsBarcode.rar

GitHub:https://github.com/lindell/JsBarcode

条码生成器:http://lindell.me/JsBarcode/generator/

JsBarcode示例与设置:http://codepen.io/lindell/pen/mPvLXx?editors=1010

简单的JsBarcode演示:http://codepen.io/lindell/pen/eZKBdO?editors=1010


该文章在 2023/6/3 23:19:57 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved