Element Plus silent printing

Prerequisites

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

Integration pattern

Use a ref on the table wrapper or a dedicated print template; call printHtml on button click. See print options.

Element Plus table example

Wrap print logic in setup:

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 el-table DOM or use a print-only template—avoid printing the whole layout.
• Dialog print: capture content while el-dialog is open.
• Preflight with getConnectStatus(); see error handling.
• Works with Vite and Vue CLI—no special webpack config.

Common Element Plus table print pitfalls

Printing el-table often pulls in sidebars, pagers, and fixed-column shadows. Use a dedicated print DOM or template.

How this page fits with related guides