Vue3 静默打印集成指南

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

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

1. Vue 页面调用 webPrintPdf.printHtml(...)
2. npm 包通过本地 WebSocket 标准通道（ws://127.0.0.1:{端口}/websocket/standard）提交 JSON 任务
3. 客户端按 type 分发至对应打印处理模块
4. 排版渲染 → 生成 PDF → 经平台打印引擎静默出纸（Windows / Linux 各自适配系统打印栈）
5. 通过同一 WebSocket 回传 success / data / message

WebSocket 消息协议

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

请求示例（printHtml）：

{
  "id": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": 1710000000000,
  "type": "printHtml",
  "content": "<div>Order details</div>",
  "pdfOptions": {
    "paperFormat": "A4",
    "margin": { "top": "20px", "bottom": "20px", "left": "20px", "right": "20px" },
    "printBackground": true
  },
  "printOptions": {
    "paperFormat": "A4",
    "printerName": "Default printer"
  },
  "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 处理流程概览

// Client-side pipeline (simplified)
Receive HTML/DOM → local layout engine → PDF file → silent print via system queue

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

Vue 3 示例

在组件或 composable 中引入并调用 printHtml，传入需要打印的 HTML 片段：

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: 'Default printer' },
        { 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>

客户端内置「运行示例」页面，可在线编辑并试运行各 API，便于联调验证。

实践建议

• 打印区域使用独立 HTML 模板，样式写在 @media print 或专用 CSS 中，避免整页污染。
• 静默打印无需 window.print，适合政务、金融等不允许弹窗的内网场景。
• 复杂表格建议固定列宽，客户端 Chromium 内核渲染与浏览器预览一致。
• 打印前可调用 webPrintPdf.utils.getConnectStatus() 确认客户端 WS 服务可用。