Next.js 静默打印集成指南

准备工作

App Router 示例

'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>
  );
}

Pages Router 示例

实践建议