React函数组件中React-to-print自定义打印页面尺寸问题求助

针对A4和Legal两种尺寸的组件，按以下方式配置即可生效：

1. A4尺寸组件配置 #

钩子与组件代码 #

import { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';

const A4PrintComponent = () => {
  const componentRef = useRef();

  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
    // 直接向打印窗口注入页面样式
    pageStyle: `
      @page {
        size: A4 portrait; /* portrait为纵向，landscape为横向 */
        margin: 0; /* 按需调整边距，若留边距需同步修改容器尺寸 */
      }
      body {
        margin: 0; /* 消除默认body边距，避免内容偏移 */
      }
    `,
  });

  return (
    <>
      <button onClick={handlePrint}>打印A4内容</button>
      <div 
        className="print-only position-relative" 
        ref={componentRef} 
        style={{ 
          width: "21cm", // A4标准宽度
          height: "29.7cm", // A4标准高度
          overflow: "hidden", // 防止内容超出容器触发分页
        }}
      >
        {/* 你的A4内容结构 */}
      </div>
    </>
  );
};

2. Legal尺寸组件配置 #

钩子与组件代码 #

const LegalPrintComponent = () => {
  const componentRef = useRef();

  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
    pageStyle: `
      @page {
        size: Legal portrait; /* Legal标准纵向尺寸：8.5in×14in */
        margin: 0;
      }
      body {
        margin: 0;
      }
    `,
  });

  return (
    <>
      <button onClick={handlePrint}>打印Legal内容</button>
      <div 
        className="print-only position-relative" 
        ref={componentRef} 
        style={{ 
          width: "8.5in", // Legal标准宽度
          height: "14in", // Legal标准高度
          overflow: "hidden",
        }}
      >
        {/* 你的Legal内容结构 */}
      </div>
    </>
  );
};

关键注意事项 #

• Chrome打印设置调整：打开打印弹窗后进入「更多设置」，将「缩放」选项改为「无」或「100%」，取消「适应纸张尺寸」——这是多数情况下CSS设置不生效的核心原因，浏览器缩放会覆盖自定义纸张尺寸。
• 容器尺寸匹配：打印容器的宽高必须和纸张标准尺寸完全对应，避免内容缩放或截断。
• 样式注入优先级：使用pageStyle参数直接注入样式到打印窗口，比外部CSS更可靠，因为react-to-print的打印窗口是独立环境，外部CSS可能无法正确加载。

内容的提问来源于stack exchange，提问作者Noman Arshad