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

<template>
	<tpx-bluetooth v-model:value="blueToothData">
		<template v-slot:button>
			<u-button @click="writeBLECharacteristicValue" type="primary" :disabled="!(blueToothData.deviceId && blueToothData.serviceId && blueToothData.characteristicId)">打印</u-button>
		</template>
	</tpx-bluetooth>
	<canvas canvas-id="shareCanvas" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
</template> 

<script>
import { showLoading, showToast, hideLoading }	from "@/common/untool"
import PrinterJobs from './print/printerjobs.js'
import * as printerUtil from './print/printerutil.js'
import * as util from './print/util.js'

export default {
	props:{
		imageUrl: {
			default () {
				return ''
			}
		},
		canvasWidth: {
			default () {
				return 320
			}
		},
		canvasHeight: {
			default () {
				return 0
			}
		},
	},
	computed: {
		
	},
	data () {
		return {
			canvasId: 'shareCanvas',
			imgZipData: '',
			blueToothData: {
				deviceId: '',
				serviceId: '',
				characteristicId: ''
			}
		}
	},
	mounted () {
		this.initData()
	},
	unmounted() {
	},
	methods: {
		async initData() {
			this.imgZipData = await this.renderCanvasImg();
		},
		// 打印-发送二进制数据
		async writeBLECharacteristicValue(){
			let imgZipData = this.imgZipData
			let printerJobs = new PrinterJobs()
			
			printerJobs
			// .print(`下单时间：2021-07-25 15:30:23`)
			// .print(printerUtil.fillLine())
			// .print('备注')
			// .setSize(2, 2)
			// .setBold(true)
			// .print(`叫那位非常漂亮的小姐姐送来，其他人送来拒收`)
			// .print(printerUtil.fillLine())
			.printQrcode(imgZipData, this.canvasWidth)
			// .setSize(1, 1)
			// .setBold(false)
			// .print(printerUtil.fillLine('*'))
			// .setAlign('lt')
			// .printArray(arr)
			// .print(printerUtil.fillAround('其它'))
			// .print(printerUtil.inline('平台随机立减', `-2.10`))
			// .print(printerUtil.inline('平台服务费', `-10.99`))
			// .printArray(arr2)
			// .print(printerUtil.fillLine())
			// .setAlign('rt')
			// .setSize(1, 2)
			// .setBold(true)
			// .print(`用户支付：￥99.99`)
			// .print(printerUtil.fillLine())
			
			let buffer = printerJobs.buffer();
			console.log('buffer>>>',buffer)
			showLoading('正在打印')
			try{
				await this.printbuffs(buffer)
				hideLoading()
				showToast('打印成功')
			}catch(e){
				console.log('打印异常', e)
			}
		},
		printbuffs(buffer) {
			let _this = this
			return new Promise(async (resolve, reject)=> {
				// 1.并行调用多次会存在写失败的可能性
				// 2.建议每次写入不超过20字节
				// 分包处理，延时调用 
				const maxChunk = 20;
				for (let i = 0, j = 0, length = buffer.byteLength; i < length; i += maxChunk, j++) {
					let subPackage = buffer.slice(i, i + maxChunk <= length ? (i + maxChunk) : length);
					try{
						await _this.printbuff(subPackage)
					}catch(msg){
						console.log("printbuffs:异常==", msg)
						showToast('分段printbuff异常', msg)
						reject(msg)
						return
					}
				}
				resolve()
			})
		},
		getImageZip(params = {}) {
			return new Promise((resolve, reject)=> {
				uni.canvasGetImageData({
					x: 0,
					y: 0,
					...params,
					success(res) {
						console.log("img====",res);
						if(res.data) {
							let data = util.zip_image(res)
							console.log("zip====", data);
							resolve(data);
						} else {
							showToast('获取图片信息异常:getImageZip')
							reject('获取图片信息异常:getImageZip')
						}
					}
				})
			})
			
		},
		renderCanvasImg() {
			let filePath = this.imageUrl
			let that = this
			return new Promise((resolve, reject)=> {
				const cxt = uni.createCanvasContext(that.canvasId, that);
				let scla = 1
				uni.getImageInfo({
					src: filePath,
					success(res) {
						// 按原图比例算出 新的画图高度
						let height = that.canvasHeight
						if(!height) {
							height = parseInt(that.canvasWidth * (res.height / res.width))
							that.$emit("update:canvasHeight", height)
						}
						cxt.drawImage(filePath, 0, 0, that.canvasWidth, that.canvasHeight);
						cxt.draw(true, ()=> {
							setTimeout( async ()=> {
								let data = await that.getImageZip({ canvasId: that.canvasId, width: that.canvasWidth, height, })
								resolve(data)
							}, 1000)
						});
					},
					fail(e) {
						reject(e)
						console.log(e)
					}
				})
			})
		},
		printbuff(buffer) {
			var _this = this
			return new Promise((resolve, reject)=> {
				uni.writeBLECharacteristicValue({
					..._this.blueToothData,
					// 这里的value是ArrayBuffer类型
					value: buffer,
					success:(res)=> {
						console.log('writeBLECharacteristicValue success', res.errMsg)
						// 必须加延迟返回，防止高频率调用
						setTimeout(()=> {
							resolve()
						}, 10)
					},
					fail:(res)=> {
						console.log('writeBLECharacteristicValue fail', res.errMsg)
						reject(res.errMsg)
					},
					complete (e) {
						console.log('writeBLECharacteristicValue complete', e)
					}
				})
			})
		}
	}
}
</script>

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