打印功能实现--web端+移动端

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');
}

 

posted @ 2024-07-03 11:59  会转圈圈的哆瑞米  阅读(14)  评论(0)  编辑  收藏  举报