angular2--使用JsBarcode生成条形码

最新推荐文章于 2025-05-14 09:24:40 发布

原创最新推荐文章于 2025-05-14 09:24:40 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JsBarcode #条形码

angular2+onsenui框架专栏收录该内容

29 篇文章

订阅专栏

本文档详细介绍了如何在Angular2项目中使用JsBarcode库生成条形码，包括下载JS文件、在angular.json配置文件中引入、在 typings.d.ts 文件定义变量、HTML及CSS样式设置和TypeScript相关代码的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
1、下载js文件

JsBarcode.all.min.js

2、在angular.json文件里引入js

3、在typings.d.ts文件里定义变量

declare var JsBarcode: any ;

4、html

<!--条形码 S-->
<div class="code-top">
	<img id="imgcode" />
</div>
<!--条形码 E-->

4、css

.code-top{
	width: 80%;
	margin: 0 auto;
}
.code-top img{
	width: 100%;
}

4、ts

codeNum:any="8610212021208984456";
ngOnInit() {
		var reg = /(\d{8})\d{4}(\d{7})/;
		let JsBarcodeNum = this.codeNum;
		setTimeout(() => {
			//生成条形码
			JsBarcode("#imgcode", JsBarcodeNum, {
				//format: "CODE39",//选择要使用的条形码类型
				//width:3,//设置条之间的宽度
				height: 80, //高度
				displayValue: false, //是否在条形码下方显示文字
				//text:JsBarcodeNum,//覆盖显示的文本
				//fontOptions:"bold italic",//使文字加粗体或变斜体
				//font:"fantasy",//设置文本的字体
				//textAlign:"left",//设置文本的水平对齐方式
				// textPosition:"top",//设置文本的垂直位置
				//textMargin:0,//设置条形码和文本之间的间距
				//fontSize:15,//设置文本的大小
				background: "#ffffff", //设置条形码的背景
				lineColor: "#000000", //设置条和文本的颜色。
				//margin:15//设置条形码周围的空白边距
			});
			this.codeNum = this.codeNum.replace(reg, "$1****$2").replace(/(.{4})/g, "$1 ");
		}, 500)
	}