如何使用react-pdf-viewer渲染PDF指定页面而非全部页面？

可以通过react-pdf-viewer实现指定页面展示的需求，也可以用更轻量的react-pdf库，以下是具体实现方案：

方案一：使用react-pdf-viewer（带完整查看器功能） #

react-pdf-viewer支持自定义页面渲染逻辑，通过renderPage属性可以控制哪些页面显示、哪些隐藏：

1. 先安装依赖：

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout

2. 组件实现代码：

import { Viewer, RenderPageProps } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import { useState } from 'react';

const FilteredPdfViewer = () => {
  // 存储用户指定的页面列表（示例值）
  const [targetPages, setTargetPages] = useState([1, 4, 7, 9, 10]);
  const defaultLayout = defaultLayoutPlugin();

  // 自定义页面渲染函数
  const renderPage = (props: RenderPageProps) => {
    const currentPageNum = props.pageIndex + 1; // PDF内部索引从0开始，转成用户习惯的1起始
    const isTargetPage = targetPages.includes(currentPageNum);

    if (!isTargetPage) {
      // 非目标页面直接隐藏
      return <div style={{ display: 'none' }} />;
    }

    // 渲染目标页面的内容
    return <props.RenderPage />;
  };

  return (
    <div style={{ height: '800px' }}>
      <Viewer
        fileUrl="/your-pdf-file.pdf"
        plugins={[defaultLayout]}
        renderPage={renderPage}
      />
    </div>
  );
};

export default FilteredPdfViewer;

说明：

• 可以根据用户输入动态修改targetPages数组，实现实时过滤页面
• 如果需要给隐藏页面添加占位提示，替换display: none的div为自定义内容即可
• 配合pageNavigationPlugin可以进一步修改导航栏，只显示目标页面的页码

方案二：使用react-pdf（轻量场景） #

如果不需要完整的PDF查看器功能，只需要展示指定页面，react-pdf的实现更直接：

1. 安装依赖：

npm install react-pdf

2. 组件实现代码：

import { Document, Page } from 'react-pdf';
import { useState } from 'react';

const LightweightPdfViewer = () => {
  const [targetPages, setTargetPages] = useState([1, 4, 7, 9, 10]);
  const [totalPages, setTotalPages] = useState(0);

  const handleDocumentLoad = ({ numPages }) => {
    setTotalPages(numPages);
  };

  return (
    <div>
      <Document
        file="/your-pdf-file.pdf"
        onLoadSuccess={handleDocumentLoad}
      >
        {targetPages.map(pageNum => (
          <Page key={pageNum} pageNumber={pageNum} />
        ))}
      </Document>
    </div>
  );
};

export default LightweightPdfViewer;

这个方案直接只渲染用户指定的页面，没有多余的隐藏逻辑，适合只需要展示功能的场景。

内容的提问来源于stack exchange，提问作者Ngo Tuan Anh