Ant Design / Pro silent printing

Prerequisites

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

Integration pattern

Wrap the table with a ref or build a print-only HTML string; call printHtml from toolbar actions. See print options.

Ant Design Table example

Same Hook pattern as the React guide:

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

• Clone .ant-table-content or use a print template—avoid printing ProLayout chrome.
• Modal print: capture content while open.
• Preflight with getConnectStatus(); see error handling.
• Works with Umi, Vite, and CRA; TypeScript types built in.

Ant Design Table / ProTable print pitfalls

ProLayout chrome, ProTable filters, fixed columns, and horizontal scroll are common extra content on paper.

How this page fits with related guides