JS使用jsBarcode生成条形码(一维码)简单实例
更新时间：2023年03月29日 11:10:07 作者：最凶残的小海豹
JsBarcode是一个用JavaScript编写的条形码生成器,它支持多种条形码格式,可在浏览器和Node.js中使用,下面这篇文章主要给大家介绍了关于JS使用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 - 生成条形码并打印出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/JsBarcode.all.min.js"></script>
<script src="js/jQuery.print.js"></script>
</head>
<body>
<input id="code" type="text" placeholder="请输入条形码"><button id="save">生成条形码</button>
<br>
<div id="PrintSection">
<img id="test">
</div>
<br>
<button id="print">打印</button>
<script>
$(function () {
// 生成条形码
$("#save").click(function () {
var requestNo = $("#code").val();
if (requestNo == "") {
return false;
} else {
$("#test").JsBarcode(requestNo);
}
})
// 打印条形码
$("#print").click(function () {
$("#PrintSection").print({
globalStyles: true,
mediaPrint: false,
stylesheet: null,
noPrintSelector: ".btncontainer",
iframe: true,
append: null,
prepend: null,
manuallyCopyFormValues: true,
deferred: $.Deferred(),
timeout: 750,
title: null,
doctype: '<!doctype html>'
});
})
})
</script>
</body>
</html>
总结
到此这篇关于JS使用jsBarcode生成条形码(一维码)的文章就介绍到这了,更多相关jsBarcode生成条形码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js中数组排序sort方法的原理,以实例形式分析了sort排序方法的运行机制,具有一定的参考借鉴价值,需要的朋友可以参考下2014-11-11
void类型和never类型都是ts新增的类型，这两者的共同点是都常见用于声明函数的返回值的类型，这里我们把它们两放在一起介绍有助于大家区分，这篇文章主要介绍了ts中的void和never类型及区别,需要的朋友可以参考下2023-05-05
控制台报错:Cannot access 'xxx' before initializatio
这篇文章主要给大家介绍了关于控制台报错:Cannot access 'xxx' before initialization的解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
js HTML5多图片上传及预览实例解析（不含前端的文件分割）
这篇文章主要详细解析了js HTML5多图片上传及预览实例，不含前端的文件分割，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
打印gridview对于一些童鞋们真的是很陌生啊,不过没有关系，因为本文的出现，或让你茅塞顿开，好了话不多说，感兴趣的朋友可以了解下，或许对你学习js高级知识有所帮助2013-02-02
这篇文章主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-06-06
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。通过本文给大家介绍JavaScript函数内部属性和函数方法，感兴趣的朋友一起学习吧2016-03-03
这篇文章主要介绍了微信小程序用户位置权限的获取方法（拒绝后提醒）,文中给大家介绍了微信小程序获取用户当前位置的三个方式，授权方法，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了小程序如何定位所在城市及发起周边搜索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1...2007-02-02
最新评论