Vue silent printing guide

Architecture: browser to local printer

The Web Print Expert client exposes a local print service (including a WebSocket channel). The web-print-pdf npm package submits jobs to that service instead of talking to the printer directly.

1. Vue calls webPrintPdf.printHtml(...)
2. npm submits JSON via the local standard channel (<code>ws://127.0.0.1:{port}/websocket/standard</code>)
3. The client dispatches by <code>type</code> to the matching print handler
4. Layout render → PDF → silent output via the platform print stack (Windows / Linux each use their native pipeline)
5. Response returns via the same WebSocket

WebSocket message protocol

Each message needs <code>id</code>, <code>type</code>, and <code>timestamp</code>. The client validates before printing.

Request (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"
  }
}

Success response:

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

Set extraOptions.action to preview for PDF-only preview without printing.

WS types (npm methods)

The client matches handlers by message.type, aligned with public npm methods.

printHtml pipeline overview

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

Receive HTML → local layout engine to PDF → silent print backend. All on the client—no <code>window.print</code>.

Vue 3 example

Import and call <code>printHtml</code> from a component or composable:

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>

Use the built-in Run examples page in the client to edit and try APIs live.

Tips

• Use a dedicated HTML template and print CSS; avoid printing the whole page.
• No window.print—ideal for intranet policies that block dialogs.
• Fix column widths for complex tables; Chromium rendering matches browser preview.
• Call webPrintPdf.utils.getConnectStatus() before printing to verify the WS service.