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');
}
标签：web,console,log,--,打印,Bluetooth,Print,device,const From： https://www.cnblogs.com/lftBlogs/p/18281354