react-pdf中PDFViewer组件如何设置内容默认适配页面显示？

目前官方未提供直接的配置项实现默认适配，可通过以下两种方式实现：

方案1：调用组件内置适配API（推荐） #

PDFViewer 实例内部默认封装了适配宽度、适配页面的原生方法，通过 ref 绑定组件后主动调用即可：

import { useRef, useEffect } from 'react';
import { PDFViewer } from '@react-pdf/renderer';
// 你的PDF文档组件
import MyDocument from './MyDocument';

function PdfPreviewPage() {
  const pdfViewerRef = useRef(null);

  useEffect(() => {
    const viewerInstance = pdfViewerRef.current;
    if (!viewerInstance) return;
    // 两种适配模式二选一：
    // 1. 默认适配页面宽度
    viewerInstance.viewer.current.fitWidth();
    // 2. 默认适配整个可视页面高度
    // viewerInstance.viewer.current.fitPage();
  }, []);

  return (
    <PDFViewer 
      ref={pdfViewerRef}
      style={{ width: '100%', height: '95vh' }}
    >
      <MyDocument />
    </PDFViewer>
  );
}

• 版本兼容说明：不同版本的 react-pdf 内部实例结构可能存在差异，如果上述路径调用失败，可以打印 pdfViewerRef.current 查看实例结构，找到对应 fitWidth/fitPage 方法的层级即可。

方案2：手动计算初始缩放比例 #

如果是固定尺寸的容器，也可以直接计算适配的缩放值传给 scale 属性：

// A4 标准页面的默认像素宽度为 595，可根据你的文档实际尺寸调整
const PDF_PAGE_WIDTH = 595;
// 动态获取容器宽度，也可以直接写固定值
const containerWidth = document.querySelector('.pdf-container').clientWidth;
const defaultScale = containerWidth / PDF_PAGE_WIDTH;

<PDFViewer scale={defaultScale}>
  <MyDocument />
</PDFViewer>

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