react-print导出PDF尺寸不符，如何固定为显示器尺寸？

以下几种方案可以让导出的PDF始终采用桌面端的布局尺寸：

• 用CSS打印媒体查询强制固定布局
  直接通过@media print覆盖响应式样式，给简历容器设置固定的桌面端宽度（比如A4纸的8.5英寸，或者常用的960px），同时重置移动端的响应式调整（比如flex方向、字体大小），确保打印时使用桌面布局。

  示例代码：

  @media print {
    .resume-container {
      width: 8.5in; /* 对应A4纸宽度，也可设为960px这类桌面宽度 */
      margin: 0 auto;
      flex-direction: row !important; /* 覆盖移动端的垂直布局 */
      font-size: 16px !important; /* 重置移动端的小字体 */
      box-sizing: border-box;
    }
    /* 隐藏仅在移动端显示的元素 */
    .mobile-only {
      display: none !important;
    }
  }
  

• 创建独立的打印专用容器
  在组件中额外渲染一个仅用于打印的简历容器，这个容器不应用响应式逻辑，始终保持桌面端的布局结构和尺寸，通过react-print指定打印这个容器的内容。平时可以把这个容器隐藏，只在打印时生效。

  示例代码：

  import React from 'react';
  import { useReactPrint } from 'react-print';
  
  const ResumeGenerator = () => {
    const { print } = useReactPrint({
      content: document.getElementById('print-target')
    });
  
    return (
      <>
        {/* 面向屏幕的响应式简历 */}
        <div className="responsive-resume">
          {/* 响应式内容 */}
        </div>
        {/* 仅用于打印的固定尺寸简历 */}
        <div 
          id="print-target" 
          className="print-resume" 
          style={{ display: 'none' }}
        >
          {/* 这里渲染和桌面端完全一致的简历内容，布局固定 */}
        </div>
        <button onClick={print}>导出PDF</button>
      </>
    );
  };
  

  对应的CSS：

  .print-resume {
    width: 8.5in;
    padding: 1in;
    box-sizing: border-box;
    /* 直接套用桌面端的样式 */
  }
  

• 配置react-print的打印参数
  检查react-print的API文档，看看是否支持指定打印纸张尺寸的配置项，比如强制设置paperSize为'A4'或自定义尺寸，让打印引擎忽略设备视口，直接使用固定纸张规格。

  示例配置（根据实际库API调整）：

  const printOptions = {
    paperSize: 'A4',
    margin: '10mm',
    orientation: 'portrait'
  };
  
  const { print } = useReactPrint({
    content: document.getElementById('resume-container'),
    ...printOptions
  });
  

核心逻辑就是让打印场景脱离设备的响应式约束，要么通过CSS强制打印样式，要么单独准备打印专用的固定尺寸内容，确保无论在手机还是桌面设备上触发导出，PDF都保持桌面端的布局和尺寸。

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