prodog-client-2025
/
client-base-v5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/bootstrap-dialog.min.css">
	</head>
	<body id="mc">
		<div id="content" class="container-fluid">
			<canvas id="canvas" width="1490" height="10000" style="border:1px solid #d3d3d3;" ref="canvas"></canvas>
		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/bootstrap-dialog.min.js"></script>
		<script src="/static/JsBarcode/JsBarcode.all.js"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var content = new Vue({
				el: "#content",
				data: function() {
					return {
						img: new Image(), // 背景图片缓存
						context: {}, // canvas对象
						HEIGHT: 0,
						printPages: [{
								//纸张宽度
								paperWidth: 500,
								//纸张高度
								paperHeight: 300,
								//纸张间距
								paperMargin: 10,
								//打印元素
								printItems: [{
									//内容
									content: '内容1苏覅是否会第三方的',
									//隐藏内容
									hideTitle: '456',
									//格式(文本，条形码，二维码，EPC).
									displayType: '文本',
									//显示.
									enabled: true,
									//左边距
									left: 10,
									//上边距
									top: 10,
									//宽度
									width: 200,
									//高度
									height: 100,
									//码字 Code-128  Ean-13
									barCodeType: undefined
								}, {
									//内容
									content: '123456789',
									//隐藏内容
									hideTitle: '789',
									//格式(文本，条形码，二维码，EPC).
									displayType: '条形码',
									//显示.
									enabled: true,
									//左边距
									left: 10,
									//上边距
									top: 30,
									//宽度
									width: 200,
									//高度
									height: 100,
									//码字 Code-128  Ean-13
									barCodeType: 'CODE128'
								}, {
									//内容
									content: undefined,
									//隐藏内容
									hideTitle: undefined,
									//格式(文本，条形码，二维码，EPC).
									displayType: '二维码',
									//显示.
									enabled: true,
									//左边距
									left: 260,
									//上边距
									top: 30,
									//宽度
									width: 200,
									//高度
									height: 100,
									//码字 Code-128  Ean-13
									barCodeType: undefined
								}]
							},
							{
								//纸张宽度
								paperWidth: 500,
								//纸张高度
								paperHeight: 300,
								//纸张间距
								paperMargin: 10,
								//打印元素
								printItems: [{
									//内容
									content: '内容2',
									//隐藏内容
									hideTitle: '456',
									//格式(文本，条形码，二维码，EPC).
									displayType: '文本',
									//显示.
									enabled: true,
									//左边距
									left: 10,
									//上边距
									top: 10,
									//宽度
									width: 200,
									//高度
									height: 100,
									//码字 Code-128  Ean-13
									barCodeType: undefined
								}, {
									//内容
									content: '1234567890',
									//隐藏内容
									hideTitle: '789',
									//格式(文本，条形码，二维码，EPC).
									displayType: '条形码',
									//显示.
									enabled: true,
									//左边距
									left: 10,
									//上边距
									top: 30,
									//宽度
									width: 200,
									//高度
									height: 100,
									//码字 Code-128  Ean-13
									barCodeType: 'CODE128'
								}, {
									//内容
									content: undefined,
									//隐藏内容
									hideTitle: undefined,
									//格式(文本，条形码，二维码，EPC).
									displayType: '二维码',
									//显示.
									enabled: true,
									//左边距
									left: 260,
									//上边距
									top: 30,
									//宽度
									width: 200,
									//高度
									height: 100,
									//码字 Code-128  Ean-13
									barCodeType: undefined
								}]
							}
						]
					}
				},
				methods: {
					draw: function() {
						var _self = this;
						var h = 0;
						var h1 = 0;
						if (_self.printPages != null && _self.printPages.length > 0) {
							for (var index = 0; index < _self.printPages.length; index++) {
								h += _self.printPages[index].paperMargin;
								h1 = h;
								//设置坐标,长宽
								this.rect(h,_self.printPages[index]);
								h += _self.printPages[index].paperHeight;
								var PrintItems = _self.printPages[index].printItems;
								if (PrintItems != null && PrintItems.length > 0) {
									for (var x = 0; x < PrintItems.length; x++) {
										var LEFT = 30 + PrintItems[x].left;
										var TOP = h1 + PrintItems[x].top;
										if (PrintItems[x].displayType == '文本') {
											this.content(PrintItems[x], LEFT, TOP);
										}
										if (PrintItems[x].displayType == '条形码') {
											this.barcode(PrintItems[x], LEFT, TOP);
										}
										if (PrintItems[x].displayType == '二维码') {
											this.QRcode(PrintItems[x], LEFT, TOP);
										}
									}
								}

							}
						}
					},
					rect: function(h,printPage) {
						//设置矩形坐标,长宽
						this.context.rect(30, h, printPage.paperWidth, printPage.paperHeight);
						this.context.stroke();
					},
					content: function(printItem, LEFT, TOP) { 
						//添加文本
						this.context.font = "10px Georgia";
						this.context.fillText(printItem.content, LEFT, TOP);
					},
					barcode: function(printItem, LEFT, TOP) {
						//添加条形码
						var barcode = new Image;
						var str = printItem.content,
							options = {
								format: printItem.barCodeType,
								displayValue: true,
								fontSize: 18,
								height: 100
							};
						JsBarcode(barcode, str, options); //原生
						// 图片加载完成后执行
						barcode.onload = () => {
							this.context.drawImage(barcode, LEFT, TOP, printItem.width, printItem.height);
						}
					},
					QRcode: function(printItem, LEFT, TOP) {
						//添加二维码
						var img = new Image;
						// 获取图片地址
						img.src = "../image/template-logo.png";

						// 图片加载完成后执行
						img.onload = () => {
							this.context.drawImage(img, LEFT, TOP, printItem.width, printItem.height);
						}
					}
				},
				mounted: function() {
					var _self = this;
					const canvas = this.$refs.canvas;
					this.context = canvas.getContext('2d')

					if (_self.printPages != null && _self.printPages.length > 0) {
						for (var index = 0; index < _self.printPages.length; index++) {
							_self.HEIGHT += _self.printPages[index].paperMargin + _self.printPages[index].paperHeight;
						}
					}
					this.draw();
				}
			})
		</script>
	</body>

</html>