uu

components/tpx-bluetooth-print/create-image-data-bycanvas.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="canvas-con">
+		<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
+	</view>	
+</template> 
+
+<script>
+	
+import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo, promiseTimeout } from "@/common/untool"
+import * as canvasUtil from "@/common/canvasUtil"
+
+export default {
+	props:{
+		
+	},
+	computed: {
+		
+	},
+	data () {
+		return {
+			canvasId: uni.$u.guid(20),
+			canvasWidth: 1,
+			canvasHeight: 1,
+			imgData: '',
+			imageUrl: '',
+		}
+	},
+	mounted () {
+		this.initData()
+	},
+	unmounted() {
+	},
+	methods: {
+		async initData() {
+			this.imageUrl && await this.renderCanvasImg(this.imageUrl);
+		},
+		renderCanvasImg(filePath, paperWidth) {
+			let that = this
+			showLoading() 
+			console.log("===renderCanvasImg:filePath=====", filePath)
+			return new Promise(async (resolve, reject)=> {
+				try{
+					let res = await getImageInfo(filePath)
+					console.log("getImageInfo res====", res) 
+					const ctx = uni.createCanvasContext(that.canvasId, that);
+					// 打印宽度须是8的整数倍，这里处理掉多余的，使得宽度合适，不然有可能乱码
+					const remainder = paperWidth % 8;
+					const w = remainder === 0 ? paperWidth : paperWidth - remainder;
+					// 等比算出图片的高度
+					const h = Math.floor((res.height * w) / res.width);
+					that.canvasWidth = w
+					that.canvasHeight = h
+					// 在canvas 画一张图片
+					let imgRect = canvasUtil.containImg(0, 0, w, h, res.width, res.height)
+					let ctData = [imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight]
+					ctx.fillStyle = 'rgba(255,255,255,1)';
+					ctx.clearRect(...ctData);
+					ctx.fillRect(...ctData);
+					// 把原图缩放到 打印宽度的比例 绘制
+					ctx.drawImage(filePath, ...ctData); 
+					ctx.draw(false, async() => {
+						let imgData = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
+						hideLoading()
+						that.imgData = imgData
+						console.log("canvasGetImageData imgData.data.length =====", imgData.data.length)
+						// 多次渲染，createCanvasContext，必须使用新的才可以
+						that.canvasId = uni.$u.guid(20)
+						resolve({
+							imgData,
+							width: w, 
+							height: h
+						})
+					});
+				}catch(e){
+					// 多次渲染，createCanvasContext，必须使用新的才可以
+					that.canvasId = uni.$u.guid(20)
+					hideLoading()
+					reject(e)
+				}
+			})
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.canvas-con{
+		width: 100%;
+	}
+	/*图片隐藏到窗口外*/
+	canvas {
+		position: absolute;
+		z-index: -999;
+		top: -999px;
+	}
+</style>

components/tpx-bluetooth-print/nativePrint/tanexPrinterUniSdk.js

@@ -51,7 +51,8 @@ var tanexPrinter = {
 		/*
 			[名称] 开始命令
			[格式] ！ {offset} 200 200 {height} {qty}
			[说明] {offset}：整个标签的水平偏移量
			200：水平分辨率，203 点/英寸（8 点/mm）
			200：垂直分辨率，203 点/英寸（8 点/mm）
			{height}:标签最大高度，点为单位
			{qty}:打印标签的数量，最大1024 张
			[实例] Input： Output：
			! 0 200 200 210 1
			TEXT 4 0 30 40 Hello World Hello World
			FORM
			PRINT
 		*/
-		tanexPrinter.init = function(maxHeight) {
+		tanexPrinter.init = function(maxHeight = 1040) {
+			// 1040 一页打印纸的高度
 			data = " ! 0 200 200 " + maxHeight + " 1\r\n"
 			tanexPrinter.addCommand(data)
 		};

components/tpx-bluetooth-print/render-template-native.vue

@@ -1,16 +1,13 @@
 <template>
 	<tpx-bluetooth-native ref="curBlueTooth">
-		<template v-slot:content>
+		<template v-slot:content></template>
-			<view class="canvas-con">
-				<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
-			</view>			
-		</template>
 	</tpx-bluetooth-native>
 	
-	<tpx-dialog type="type-dialog" title="打印中" :show="percentage">
+	<!-- 打印进度 -->
+	<tpx-dialog type="type-dialog" title="打印中" :show="prtPercentage">
 		<u-row custom-style="width: 500rpx;min-height: 150rpx;padding: 10rpx;">
 			<view>
-				<u-line-progress :percentage="percentage" activeColor="#B12D29" height="30"></u-line-progress>
+				<u-line-progress :percentage="prtPercentage" activeColor="#B12D29" height="30"></u-line-progress>
 				<view class="pt-20">正在发送数据, 请勿退出页面, 如果卡住了请重连打印机重试</view>
 			</view>
 		</u-row>
@@ -34,13 +31,9 @@ export default {
 	},
 	data () {
 		return {
-			canvasId: uni.$u.guid(20),
+			prtPercentage: 0, // 打印进度 
-			canvasWidth: 1,
-			canvasHeight: 1,
-			imgData: '',
-			percentage: 0, // 打印进度 
-			imageUrl: '',
 			paperWidth: 480,
+			imgRes: {},
 		}
 	},
 	mounted () {
@@ -50,7 +43,6 @@ export default {
 	},
 	methods: {
 		async initData() {
-			this.imageUrl && await this.renderCanvasImg(this.imageUrl);
 		},
 		// 打印
 		handlePrint(){
@@ -61,80 +53,23 @@ export default {
 					return reject('打印参数校验不通过')
 				}
 				let prtInstance = tanexPrinterUniSdk.createInstance()
-				prtInstance.init(that.canvasHeight)
+				// prtInstance.init(that.imgRes.height)
-				prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
+				// prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
-				prtInstance.addBitmapByEG(0, 0, that.imgData)
+				prtInstance.addBitmapByEG(0, 0, that.imgRes.imgData)
 				prtInstance.setPagePrint()
 				let commond = prtInstance.getPrintCmd()
 				console.log("打印命令组装完成,开始打印=====", commond)
 				printModule.print(commond)
 				that.showToast('数据发送成功，如果无法打印请重连设备重试')
+				resolve(true)
 				// await that.loadPrintProcess()
 				// printModule.printTestSimple(deviceId)
 			})
 		},
-		// 模拟打印进度, 用于加载进度条
-		async loadPrintProcess(){
-			let that = this
-			this.percentage = 0
-			let addLen = 10
-			for(let i=0; i<100; i = i + addLen) {
-				await new Promise((resolve)=> {
-					setTimeout(()=> {
-						that.percentage = i
-						resolve()
-					}, 3000/addLen)
-				})
-			}
-			that.percentage = 0
-			that.showToast('数据发送完毕')
-		},
-		renderCanvasImg(filePath) {
-			let that = this
-			showLoading() 
-			console.log("===renderCanvasImg:filePath=====", filePath)
-			return new Promise(async (resolve, reject)=> {
-				try{
-					let res = await getImageInfo(filePath)
-					console.log("getImageInfo res====", res) 
-					const ctx = uni.createCanvasContext(that.canvasId, that);
-					// 打印宽度须是8的整数倍，这里处理掉多余的，使得宽度合适，不然有可能乱码
-					const remainder = that.paperWidth % 8;
-					const w = remainder === 0 ? that.paperWidth : that.paperWidth - remainder;
-					// 等比算出图片的高度
-					const h = Math.floor((res.height * w) / res.width);
-					that.canvasWidth = w
-					that.canvasHeight = h
-					// 在canvas 画一张图片
-					let imgRect = canvasUtil.containImg(0, 0, w, h, res.width, res.height)
-					let ctData = [imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight]
-					ctx.fillStyle = 'rgba(255,255,255,1)';
-					ctx.clearRect(...ctData);
-					ctx.fillRect(...ctData);
-					// 把原图缩放到 打印宽度的比例 绘制
-					ctx.drawImage(filePath, ...ctData); 
-					ctx.draw(false, async() => {
-						// await promiseTimeout(1000)
-						let imgData = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
-						hideLoading()
-						that.imgData = imgData
-						console.log("canvasGetImageData imgData.data.length =====", imgData.data.length)
-						// 多次渲染，createCanvasContext，必须使用新的才可以
-						that.canvasId = uni.$u.guid(20)
-						resolve()
-					});
-				}catch(e){
-					// 多次渲染，createCanvasContext，必须使用新的才可以
-					that.canvasId = uni.$u.guid(20)
-					hideLoading()
-					reject(e)
-				}
-			})
-		},
 		checkPrintParam() {
 			let msg = '', bl = false
 			let { deviceId, isStateOn } = this.$refs.curBlueTooth.getConData()
-			!this.imgData && (msg = '打印内容不能为空，请重试')
+			!this.imgRes.imgData && (msg = '打印内容不能为空，请重试')
 			if(!msg && !(deviceId && isStateOn)) {
 				msg = '未连接打印设备'
 			}
@@ -146,16 +81,12 @@ export default {
 			}
 		},
 		// 给外部调用api，打印自定义图
-		async callPrint({ paperWidth, imageUrl } = {}) {
+		async callPrint({ paperWidth, imgRes } = {}) {
 			try{
 				this.paperWidth = paperWidth || this.paperWidth
-				if(this.imageUrl != imageUrl || !this.imgData) {
+				this.imgRes = imgRes
-					this.imageUrl = imageUrl
-					await this.renderCanvasImg(this.imageUrl);
-				}
 				let conSta = await this.$refs.curBlueTooth.autoConnect()
 				this.$emit('autoConnectCallback', conSta)
-				
 				if(conSta) {
 					await this.handlePrint() 
 					return true
@@ -168,13 +99,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	.canvas-con{
+	
-		width: 100%;
-	}
-	/*图片隐藏到窗口外*/
-	canvas {
-		position: absolute;
-		z-index: -999;
-		top: -999px;
-	}
 </style>

components/tpx-bluetooth-print/tpx-bluetooth-print.vue

@@ -1,5 +1,4 @@
 <template>
-	
 	<!-- 打印预览 -->
 	<tpx-dialog
 		v-model:show="previewModel.show"
@@ -41,12 +40,14 @@
 		</view>
 	</tpx-dialog>
 	
+	<create-image-data-bycanvas ref="curCanvas"></create-image-data-bycanvas>
 </template> 
 
 <script>
 
 import RenderTemplate from "./render-template-native"
 import { promiseTimeout } from "@/common/untool"
+import CreateImageDataBycanvas from "./create-image-data-bycanvas"
 
 export default {
 	props:{
@@ -55,7 +56,7 @@ export default {
 	computed: {
 	},
 	components: {
-		RenderTemplate, RenderTemplate
+		RenderTemplate, RenderTemplate, CreateImageDataBycanvas
 	},
 	data () {
 		return {
@@ -100,8 +101,9 @@ export default {
 			}
 		},
 		async confirmPrint(){
+			let imgRes = await this.$refs.curCanvas.renderCanvasImg(this.imageUrl[0], this.paperWidth)
 			let res = await this.$refs.curPrint.callPrint({
-				imageUrl: this.imageUrl[0],
+				imgRes,
 				paperWidth: this.paperWidth
 			})
 		},