smart_campus_uni/pages/printNew/printNew.vue

<template>
	<view class="print-page">
		<ch-nav-bar :height="66" title="选择打印机" :rightWidth="140">
			<block v-slot:right>
				<ch-nav-btn icon="paperplane-filled" iconSize="28" color="#fff" @click="print">
					打印
				</ch-nav-btn>
			</block>
		</ch-nav-bar>
		<uni-section title="附近打印机" type="line">
			<block v-slot:right>
				<button type="primary" size="mini" class="search-btn" :loading="searching" :disabled="searching" @tap="searchDevices">{{ searching ? '搜索中...' : '搜索打印机' }}</button>
			</block>
			<uni-list>
				<block v-for="item in devices" :key="item.deviceId">
					<uni-list-item
						showArrow
						showExtraIcon
						:extraIcon="extraIcon"
						:clickable="true" 
						:title="item.name || item.deviceId" 
						@click="connectBLE(item.deviceId)">
						<block v-slot:footer>
							<text>{{ item.deviceId == connectId ? '已连接' : ''}}</text>
						</block>
					</uni-list-item>
				</block>
			</uni-list>
		</uni-section>
		<sp-html2canvas-render domId="render-dom" ref="renderRef" @renderOver="renderOver"></sp-html2canvas-render>
		<view id="render-dom" style="">
			<view>测试 htmltoCanvas</view>
			<!-- <view>测试 htmltoCanvas</view>
			<view>测试 htmltoCanvas</view>
			<view>测试 htmltoCanvas</view>
			<view>测试 htmltoCanvas</view>
			<view>测试 htmltoCanvas</view>
			<view>测试 htmltoCanvas</view>
			<view>测试 htmltoCanvas</view> -->
			<view>
				<image src="../../static/logo.png" style="height: 50px;width: 50px;"></image>
			</view>
		</view>
		<canvas id="myCanvas" canvas-id="myCanvas" style="width: 800px; height: 800px;"></canvas>
	</view>
</template>

<script setup>
	import { onBeforeUnmount, onMounted, reactive, toRefs, ref, nextTick } from 'vue';
	import { getImgData } from '@/api/common.js';
	import ble from './util/bluetooth.js';
	const CPCL = require('./util/CPCL.min.js');
	const HEX = require('./util/HEX.min.js');
	 
	// #ifdef APP-PLUS
	// const bluetooth = new Bluetooth();
	// #endif
	
	const  renderRef = ref(null)
	
	const data = reactive({
		searching: false,
		printer: null,
		connectId: '',
		devices: [],
		currentDevices: [],
		writeId: '',
		extraIcon: {
			type: 'smallcircle',
			color: '#4cd964',
			size: '32'
		},
		questions: [],
		imgPixData: null
	});
	
	const { devices, currentDevices, writeId, searching, connectId, extraIcon, questions, imgPixData, printer } = toRefs(data);
	
	onMounted(() => {
		uni.getStorage({
			key: 'questions',
			success: (res) => {
				questions.value = JSON.parse(res.data)
				console.log(questions.value)
				// getImg();
			}
		})
	})
	
	onBeforeUnmount(() => {
		// #ifdef APP-PLUS
		// bluetooth.closeBluetoothAdapter() // 关闭蓝牙模块
		// #endif
	})
	
	// 搜索打印机
	function searchDevices () {
		closeConnection()
		searching.value = true;
		devices.value = []
		ble.find(res => {
			console.log(res.devices)
			const newDevices = res.devices;
			newDevices.forEach(newItem => {
				const isExist = devices.value.some(item => item.deviceId == newItem.deviceId);
				if (!newItem.name || isExist) return false;
				devices.value.push(newItem)
			})
		});
		setTimeout(() => {
			ble.stopFind();
			searching.value = false;
		}, 10000)
	}
	
	// 连接打印机
	async function connectBLE (deviceId) {
		ble.stopFind();
		searching.value = false;
		closeConnection()
		printer.value = await ble.connect({
			deviceId,
			onBLEConnectionStateChange,
			onBLECharacteristicValueChange,
			fail() {
				uni.showToast({
					icon: 'none',
					title: '连接失败'
				})
			}
		})
	}
	
	async function print() {
		console.log(CPCL)
		// renderRef.value.h2cRenderDom();
		const imgData = await generateCanvasImageData()
		renderOver({ base64: '', imgData })
	}
	
	function renderOver({ base64, imgData }) {
		console.log('imgData', imgData)
		// 构建CPCL指令               整体偏移量 高度 打印份数
		let cpcl = CPCL.Builder.createArea(0, 2376, 1)
		    // 任务ID，这里传什么打印结果会原样携带返回
		    .taskId('1')
		    // 页面宽度，单位：点
		    .pageWidth(1680)
		    // 打印图片 Canvas的ImageData x y
		    .imageGG(imgData, 10, 10) // 小程序调试模式下比较耗时，体验版、正式版正常。
		    .formPrint()
		    .build();
		// 写入指令
		console.log(imgData)
		printer.value.write(cpcl);
	}
	
	// 监听连接状态
	function onBLEConnectionStateChange ({ deviceId, connected }) {
		connectId.value = connected ? deviceId : ''
	}
	
	// 监听特征值变化
	function onBLECharacteristicValueChange (res) {
		
	}
	
	// 断开连接
	function closeConnection () {
		if (!printer.value || !printer.connected) return;
		printer.value.close().then(() => {
			connectId.value = ''
		}).catch(error => {
			console.error('断开连接失败', error)
		})
	}
</script>

<style lang="scss" scoped>
@import './print.scss';
</style>