JsBarcode插件在html中生成条形码步骤详解

六月初六月初 JavaScipt 2023-06-11 23:57:20

条形码在生活中的应用非常广泛，不论是食品溯源抑或是物品标识基本都是由条形码完成。

本文介绍基于JsBarcode插件在html页面上实现生成条形码功能，详细流程如下：

一、下载JsBarcode插件

    GitHub地址

二、使用完整案例

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="../dist/JsBarcode.all.js"></script>
</head>
<body>
	<div>
		<img id="barcode1"/>
		<script>
			JsBarcode("#barcode1", "5101314", {
			 format: "CODE39",//选择要使用的条形码类型
			 width:3,//设置条之间的宽度
			 height:100,//高度
			 displayValue:true,//是否在条形码下方显示文字
			 text:"六月初博客",//覆盖显示的文本
			 fontOptions:"bold italic",//使文字加粗体或变斜体
			 font:"fantasy",//设置文本的字体
			 textAlign:"left",//设置文本的水平对齐方式
			 textPosition:"top",//设置文本的垂直位置
			 textMargin:5,//设置条形码和文本之间的间距
			 fontSize:15,//设置文本的大小
			 background:"#eee",//设置条形码的背景
			 lineColor:"#2196f3",//设置条和文本的颜色。
			 margin:15//设置条形码周围的空白边距
			});
		</script>
	</div>
</body>
</html>

通过上述案例，可以实现基础的条形码生成操作。

 

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！