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

<template>
	<tpx-bluetooth ref="curBlueTooth">
		<template v-slot:button>
			<u-button @click="handlePrint" type="primary">确认打印</u-button>
		</template>
		<template v-slot:content>
			<view class="pt-20 pb-10">打印内容</view>
			<view class="canvas-con">
				<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
			</view>			
		</template>
	</tpx-bluetooth>
	
	<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 * as printJob from './print/printJob'

export default {
	props:{
		
	},
	computed: {
		
	},
	data () {
		return {
			canvasId: uni.$u.guid(20),
			canvasWidth: 1,
			canvasHeight: 1,
			imgData: '',
			percentage: 0, // 打印进度 
			threshold: 200, // 阈值(值越大,图片打印越深)
			imageUrl: '',
			paperWidth: 320,
		}
	},
	mounted () {
		this.initData()
	},
	unmounted() {
	},
	methods: {
		async initData() {
			await this.renderCanvasImg(this.imageUrl);
		},
		// 打印
		handlePrint(){
			const that = this
			let data = this.$refs.curBlueTooth.getConData()
			console.log("打印组件选中数据：data=====", data)
			let { deviceId, serviceId, characteristicId } = data
			return new Promise((resolve, reject)=> {
				let { bl } = that.checkPrintParam()
				if(!bl) {
					return reject('打印参数校验不通过')
				} 
				const opt = {
				    ...{ deviceId, serviceId, characteristicId },
				    onProgress: (percentage) => {
						console.log("打印进度====", percentage)
				        that.percentage = percentage
				    },
				    lasterSuccess: () => {
						that.percentage = 0
						hideLoading()
				        uni.showModal({
				            title: '提示',
				            content: '数据已发送完，请检查打印的内容是否正常',
				            showCancel: false,
				            confirmText: '好的',
				        });
						resolve()
				    },
					onError: (e)=> {
						that.percentage = 0
						showToast(`打印异常`)
						hideLoading()
						reject(e)
					}
				}
				console.log('====that.imgData===', that.imgData)
				//打印图片
				printJob.printImage(
				    opt,
				    // 将图片数据转成位图数据
				    printJob.overwriteImageData({
				        threshold: that.threshold,
				        imageData: that.imgData,
				        width: that.canvasWidth,
				        height: that.canvasHeight,
				    }),
				);
			})
		},
		renderCanvasImg(filePath) {
			let that = this
			// showLoading() 
			console.log("===renderCanvasImg:filePath=====", filePath)
			return new Promise(async (resolve, reject)=> {
				try{
					// 多次渲染，createCanvasContext，必须使用新的才可以
					that.canvasId = uni.$u.guid(20)
					await promiseTimeout(500)
					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 { data } = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
						hideLoading()
						that.imgData = data
						resolve(data)
					});
				}catch(e){
					hideLoading()
					reject(e)
				}
			})
		},
		checkPrintParam() {
			let msg = '', bl = false
			let { deviceId, serviceId, characteristicId } = this.$refs.curBlueTooth.getConData()
			!this.imgData && (msg = '打印内容不能为空，请重试')
			if(!msg && !(deviceId && serviceId && characteristicId)) {
				msg = '请选选择打印设备'
			}
			msg && (showToast(msg))
			return {
				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%;
		overflow: auto;
	}
	/*图片隐藏到窗口外*/
	canvas {
		// position: absolute;
		// z-index: -999;
		// top: -999px;
	}
</style>