React 静默打印集成指南

准备工作

整体架构

React Hook 示例

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

实践建议