web端---调用本机的打印机即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Print Custom Content and Style</title> <style> @media print {/* 打印时隐藏页面中的元素 */#header, #footer { display: none; }/* 设置打印页面布局 */body { margin: 0; } }/* 自定义打印样式 */ .print-content {padding: 20px;background-color: #f0f0f0;border: 1px solid #ccc; } </style> </head> <body> <div id="printSection" class="print-content"><!-- 这里放置您想要打印的内容 --><h1>Custom Print Content</h1><p>This is a custom content for printing.</p> </div><button onclick="printSection()">Print</button><script> function printSection() {let printContent = document.getElementById('printSection').outerHTML;let originalContent = document.body.innerHTML;document.body.innerHTML = printContent;window.print();document.body.innerHTML = originalContent; } </script> </body> </html>
移动端---使用蓝牙传输
<template><van-button type="primary" @click="printToBluetoothPrinter">自定义打印</van-button> </template><script> export default {methods: {async printToBluetoothPrinter() {try {const device = await navigator.bluetooth.requestDevice({filters: [{ services: [0x1809] }]});const server = await device.gatt.connect();const service = await server.getPrimaryService(0x1802);const characteristic = await service.getCharacteristic(0x2A06);const printContent = `<h1 style="color: blue;">Custom Print Content</h1><p style="font-size: 16px;">This is a dynamic custom print content.</p>`;const encoder = new TextEncoder();await characteristic.writeValue(encoder.encode(printContent));console.log('Print command sent successfully');} catch (error) {console.error('Error:', error);}}} }; </script>
另附上一个蓝牙连接各阶段可调试：
// 检查浏览器是否支持 Web Bluetooth API if ('bluetooth' in navigator) {console.log('Web Bluetooth API is supported');// 请求蓝牙设备连接 navigator.bluetooth.requestDevice({filters: [{ services: [0x1809] }]}).then(device => {console.log('Bluetooth device selected: ', device.name);// 连接蓝牙设备return device.gatt.connect();}).then(server => {console.log('Bluetooth device connected: ', server);// 获取服务和特征值return server.getPrimaryService(0x1802);}).then(service => {console.log('Bluetooth service selected: ', service);return service.getCharacteristic(0x2A06);}).then(characteristic => {console.log('Bluetooth characteristic selected: ', characteristic);// 向蓝牙打印机发送打印指令let printData = 'Hello, Bluetooth Printer!';let encoder = new TextEncoder();return characteristic.writeValue(encoder.encode(printData));}).then(() => {console.log('Print command sent successfully');}).catch(error => {console.error('Error:', error);}); } else {console.log('Web Bluetooth API is not supported'); }
