Vue 静默打印集成指南

整体架构：浏览器如何驱动本地打印

Web打印专家客户端启动后，会在本机提供一套本地打印服务（含 WebSocket 通道）。web-print-pdf npm 包作为调用方，把任务提交给该服务统一调度，而非由网页直接操作打印机。

1. Vue 页面调用 webPrintPdf.printHtml(...)
2. npm 包通过本地 WebSocket 标准通道提交 JSON 任务
3. 客户端按 type 分发至对应打印处理模块
4. 排版渲染 → 生成 PDF → 经平台打印引擎静默出纸
5. 通过同一 WebSocket 回传 success / data / message

WebSocket 消息协议

每条消息须包含 id、type、timestamp 等基础字段，客户端校验通过后才进入打印流程。

请求示例（printHtml）：

{
  "id": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": 1710000000000,
  "type": "printHtml",
  "content": "<div>订单详情</div>",
  "pdfOptions": {
    "paperFormat": "A4",
    "margin": { "top": "20px", "bottom": "20px", "left": "20px", "right": "20px" },
    "printBackground": true
  },
  "printOptions": {
    "paperFormat": "A4",
    "printerName": "默认打印机"
  },
  "extraOptions": {
    "requestTimeout": 15,
    "action": "print"
  }
}

成功响应：

{
  "id": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": 1710000001000,
  "type": "printHtml",
  "success": true,
  "data": { "pdfPath": "...", "pdfUrl": "...", "pdfFileName": "..." },
  "extraOptions": { "action": "print" }
}

extraOptions.action 设为 preview 时仅生成 PDF 并返回预览地址，不直接出纸。

支持的 WS type（与 npm 方法对应）

客户端内部按 message.type 匹配处理逻辑，与 npm 公开方法一一对应。

printHtml 处理流程概览

// 客户端内部处理链（示意）
接收 HTML/DOM → 本地排版引擎 → PDF 文件 → 系统打印队列静默出纸

整体链路：接收 HTML → 本地排版引擎转 PDF → 打印后端静默出纸。全程在客户端内完成，不经过浏览器 window.print。

Vue 3 集成示例

import { ref } from 'vue';
import webPrintPdf from 'web-print-pdf';

export function useSilentPrint() {
  const loading = ref(false);

  async function printReceipt(html) {
    loading.value = true;
    try {
      const res = await webPrintPdf.printHtml(
        html,
        {
          paperFormat: 'A4',
          margin: { top: '8mm', bottom: '8mm', left: '8mm', right: '8mm' },
          printBackground: true
        },
        { paperFormat: 'A4', printerName: '默认打印机' },
        { requestTimeout: 15, action: 'print' }
      );
      return res;
    } finally {
      loading.value = false;
    }
  }

  return { loading, printReceipt };
}

<script setup>
import { useSilentPrint } from './useSilentPrint';

const { loading, printReceipt } = useSilentPrint();

async function onPrint() {
  const html = document.getElementById('print-area').innerHTML;
  await printReceipt(html);
}
</script>

客户端内置交互示例页（与源码一致）：启动客户端后进入「运行示例」，对应工程 vueApp/src/views/webPrint/home/examples/index.vue，可在线编辑并运行各 API。

实践建议

• 打印前可调用 webPrintPdf.utils.getConnectStatus() 确认客户端 WS 服务可用。