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="shareCanvas" :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 } from "@/common/untool"
import * as canvasUtil from "@/common/canvasUtil"
import * as printJob from './print/printJob'


export default {
	props:{
		imageUrl: {
			default () {
				return ''
			}
		},
		paperWidth: {
			default () {
				return 320
			}
		},
	},
	computed: {
		
	},
	data () {
		return {
			canvasId: 'shareCanvas',
			canvasWidth: 1,
			canvasHeight: 1,
			imgData: '',
			percentage: 0, // 打印进度 
			threshold: 200, // 阈值(值越大,图片打印越深)
		}
	},
	mounted () {
		this.initData()
	},
	unmounted() {
	},
	methods: {
		async initData() {
			this.imgData = await this.renderCanvasImg();
		},
		// 打印
		async handlePrint(){
			const that = this
			let { deviceId, serviceId, characteristicId } = this.$refs.curBlueTooth.getInstance()
			
			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: '好的',
			        });
			    },
				onError: ()=> {
					that.percentage = 0
					showToast(`打印异常`)
					hideLoading()
				}
			}
			console.log('====this.imgData===', this.imgData)
			//打印图片
			printJob.printImage(
			    opt,
			    // 将图片数据转成位图数据
			    printJob.overwriteImageData({
			        threshold: this.threshold,
			        imageData: this.imgData,
			        width: this.canvasWidth,
			        height: this.canvasHeight,
			    }),
			);
		},
		// 选择本地文件打印-- TODO
		// chooseImage() {
		//     wx.chooseImage({ 
		//         success: (res) => {
		//             const tempFilePath = res.tempFilePaths[0];
		            
		//         },
		//     });
		// },
		
		renderCanvasImg() {
			let filePath = this.imageUrl
			let that = this
			showLoading()
			return new Promise(async (resolve, reject)=> {
				try{
					let res = await getImageInfo(filePath)
					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);
					this.canvasWidth = w
					this.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, () => {
						setTimeout( async ()=> {
							let { data } = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
							hideLoading()
							resolve(data)
						}, 1000)
					});
				}catch(e){
					hideLoading()
					reject(e)
				}
			})
		}
	}
}
</script>

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