Next.js silent printing guide

Prerequisites

• Install and run the Web Print Expert client (Windows, macOS, or Linux)
• Run npm install web-print-pdf in your project
• App Router: add "use client" to print components—never call printHtml from Server Components

App Router example

Create SilentPrintButton.tsx as a client component and call printHtml on button click:

'use client';

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

export function SilentPrintButton({ html }: { html: string }) {
  const [loading, setLoading] = useState(false);
  return (
    <button
      disabled={loading}
      onClick={async () => {
        setLoading(true);
        try {
          await webPrintPdf.printHtml(html, { paperFormat: 'A4' }, { printerName: '默认打印机' });
        } finally {
          setLoading(false);
        }
      }}
    >
      {loading ? '打印中…' : '静默打印'}
    </button>
  );
}

Import that component from Server Component pages—do not import web-print-pdf directly in server layout.tsx / page.tsx.

Pages Router example

In pages/**/*.tsx, import and call printHtml like any React app—only trigger from browser events, not during SSR.

Tips

• Production builds behave the same for print APIs—the critical part is the client boundary, not dev vs start.
• Migrating from Ant Design Pro / Umi: reuse the React Hook pattern plus "use client".
• Preflight with webPrintPdf.utils.getConnectStatus() before printing.
• Keep print HTML in client state/ref to avoid leaking business data into server logs.