React silent printing guide

Prerequisites

• Install and run the Web Print Expert client
• Run npm install web-print-pdf

Architecture

React calls printHtml → npm submits via local WebSocket → client prints silently. See window.print alternative for the full picture.

React Hook example

Wrap useSilentPrint and pass print-area HTML on button click:

import { useCallback, useState } from 'react';
import webPrintPdf from 'web-print-pdf';

export function useSilentPrint() {
  const [loading, setLoading] = useState(false);

  const printHtml = useCallback(async (html) => {
    setLoading(true);
    try {
      return await webPrintPdf.printHtml(
        html,
        { paperFormat: 'A4', printBackground: true },
        { paperFormat: 'A4', printerName: '默认打印机' }
      );
    } finally {
      setLoading(false);
    }
  }, []);

  return { loading, printHtml };
}

import { useSilentPrint } from './useSilentPrint';

export function OrderPrintButton({ html }) {
  const { loading, printHtml } = useSilentPrint();
  return (
    <button disabled={loading} onClick={() => printHtml(html)}>
      {loading ? '打印中…' : '静默打印'}
    </button>
  );
}

Tips

• Isolate print HTML/CSS; use @media print or a dedicated stylesheet.
• Silent print avoids window.print dialogs—common in intranet policies.
• Preflight with webPrintPdf.utils.getConnectStatus().
• Works the same in Ant Design Pro, Umi, CRA, or Vite—import the npm package and call APIs.