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

<template>
	<tpx-bluetooth-native ref="curBlueTooth">
		<template v-slot:button>
			<u-button @click="handlePrint" type="primary">打印</u-button>
		</template>
		<template v-slot:content>
			<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">
		<u-row custom-style="width: 500rpx;min-height: 150rpx;padding: 10rpx;">
			<view>
				<u-line-progress :percentage="percentage" activeColor="#B12D29" height="30"></u-line-progress>
				<view class="pt-20">正在发送数据, 请勿退出页面, 如果卡住了请重连打印机重试</view>
			</view>
		</u-row>
	</tpx-dialog>
	
</template> 

<script>
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo, promiseTimeout } from "@/common/untool"
import * as canvasUtil from "@/common/canvasUtil"
import tanexPrinterUniSdk from './nativePrint/tanexPrinterUniSdk'
import printModule  from './nativePrint/print'
import dayjs from "dayjs"

export default {
	props:{
		
	},
	computed: {
		
	},
	data () {
		return {
			canvasId: uni.$u.guid(20),
			canvasWidth: 1,
			canvasHeight: 1,
			imgData: '',
			percentage: 0, // 打印进度 
			imageUrl: '',
			paperWidth: 480,
		}
	},
	mounted () {
		this.initData()
	},
	unmounted() {
	},
	methods: {
		async initData() {
			this.imageUrl && await this.renderCanvasImg(this.imageUrl);
		},
		// 打印
		handlePrint(){
			const that = this
			return new Promise(async (resolve, reject)=> {
				let { bl, deviceId } = that.checkPrintParam()
				if(!bl) {
					return reject('打印参数校验不通过')
				}
				let prtInstance = tanexPrinterUniSdk.createInstance()
				prtInstance.init(that.canvasHeight)
				prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
				prtInstance.addBitmapByEG(0, 0, that.imgData)
				prtInstance.setPagePrint()
				let commond = prtInstance.getPrintCmd()
				console.log("打印命令组装完成,开始打印=====", commond)
				printModule.print(commond)
				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 = '打印内容不能为空，请重试')
			if(!msg && !(deviceId && isStateOn)) {
				msg = '未连接打印设备'
			}
			msg && (showToast(msg))
			return {
				deviceId,
				msg,
				bl: !msg
			}
		},
		// 给外部调用api，打印自定义图
		async callPrint({ paperWidth, imageUrl } = {}) {
			try{
				this.paperWidth = paperWidth
				if(this.imageUrl != imageUrl || !this.imgData) {
					this.imageUrl = imageUrl
					await this.renderCanvasImg(this.imageUrl);
				}
				let conSta = await this.$refs.curBlueTooth.autoConnect()
				if(conSta) {
					await this.handlePrint() 
					return true
				}
			} catch(e){
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.canvas-con{
		width: 100%;
	}
	/*图片隐藏到窗口外*/
	canvas {
		position: absolute;
		z-index: -999;
		top: -999px;
	}
</style>