angular2--使用JsBarcode生成条形码

angular2--使用JsBarcode生成条形码_第1张图片
1、下载js文件

JsBarcode.all.min.js

2、在angular.json文件里引入js
angular2--使用JsBarcode生成条形码_第2张图片

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

declare var JsBarcode: any ;

4、html


<div class="code-top">
	<img id="imgcode" />
div>

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)
	}

你可能感兴趣的:(angular2--使用JsBarcode生成条形码)