react-pdf中媒体查询与StyleSheet失效问题求助

1. 先解决编译错误 #

你导入的StyleSheet来自@react-pdf/render，这个包是用来生成PDF文件的，和web端展示PDF的react-pdf不是同一套工具链，web端入口（entry.webpack5）根本不导出这个模块。直接删除相关代码即可：

// 删除这两行无用代码
import { StyleSheet } from "@react-pdf/render";
const styles = StyleSheet.create({...});

同时移除<Page>组件上的style={styles.page}属性——web端的Page组件不支持这个样式配置。

2. 修复CSS媒体查询不生效问题 #

直接设置.pdf容器宽度无效，是因为React-PDF的Page组件会生成固定尺寸的canvas/svg元素，父容器的宽度无法直接约束它。以下是两种无需hooks的解决办法：

方案一：纯CSS缩放实现响应式 #

给.pdf容器添加缩放样式，媒体查询中调整缩放比例，同时用transform-origin保证缩放从左上角开始，避免偏移：

.pdf {
  transform: scale(1);
  transform-origin: top left;
  /* 可选：防止缩放后超出容器 */
  overflow: auto;
}

@media only screen and (max-width: 600px) {
  .home-text {
    width: 400px;
  }
  .pdf {
    /* 根据需求调整缩放比例，适配400px宽度 */
    transform: scale(0.7);
    width: 100%;
  }
}

方案二：动态设置scale属性（非hooks版） #

如果不想用CSS缩放，可以在组件中直接计算scale值。函数组件中直接初始化计算（仅挂载时生效）：

function Home() {
  // 根据窗口宽度初始化缩放比例
  const scale = window.innerWidth <= 600 ? 0.7 : 1.5;

  return (
    <>
      {/* 其他代码省略 */}
      <div className="pdf">
        <Document file={HomePDF}>
          <Page scale={scale} pageNumber={1} />
        </Document>
      </div>
      {/* 其他代码省略 */}
    </>
  );
}

如果需要支持窗口 resize 自动更新，改用类组件实现：

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      scale: window.innerWidth <= 600 ? 0.7 : 1.5,
    };
    this.handleResize = this.handleResize.bind(this);
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize() {
    this.setState({
      scale: window.innerWidth <= 600 ? 0.7 : 1.5,
    });
  }

  render() {
    return (
      <>
        {/* 其他代码省略 */}
        <div className="pdf">
          <Document file={HomePDF}>
            <Page scale={this.state.scale} pageNumber={1} />
          </Document>
        </div>
        {/* 其他代码省略 */}
      </>
    );
  }
}

3. 其他非hooks尺寸调整方法 #

• 直接设置Page的width属性：配合CSS变量实现动态宽度：
  先在CSS中定义变量：

  :root {
    --pdf-width: 800px;
  }
  @media (max-width: 600px) {
    :root {
      --pdf-width: 400px;
    }
  }
  

  然后在React代码中读取变量并设置：

  const pdfWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--pdf-width'), 10);
  // ...
  <Page width={pdfWidth} pageNumber={1} />
  

• 强制自适应canvas：直接给生成的canvas设置样式，让它自适应父容器：

  .pdf canvas {
    max-width: 100%;
    height: auto !important;
  }
  

  这种方式最简单，但可能导致PDF内容拉伸变形，按需选择。

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