JS 生成条形码（一维码）jsBarcode-Toy模板网

这篇具有很好参考价值的文章主要介绍了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!");

三、结果
jsbarcode,web前端,javascript,前端,开发语言

参数设置（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 使用方法文章来源地址https://www.toymoban.com/news/detail-806573.html

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

到了这里，关于JS 生成条形码（一维码）jsBarcode的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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