Next.js应用实现PDF指定页面跳转方案咨询

Google Drive Viewer iframe方案局限性 #

通过iframe嵌入Google Drive Viewer无法实现外部控制跳转指定页面，因为跨域限制，主页面无法访问iframe内部的PDF控制API，所以需要更换方案。

React-PDF Viewer 实现方案 #

使用@react-pdf-viewer系列包可以轻松实现页码跳转功能，以下是具体代码示例：

1. 安装依赖 #

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

2. Next.js 组件代码 #

'use client'; // App Router需添加，Pages Router可省略

import { useState, useRef } from 'react';
import { Viewer } 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';

export default function PDFViewerPage({ pdfUrl }) {
  const [targetPage, setTargetPage] = useState('');
  const viewerRef = useRef(null);
  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  const jumpToPage = () => {
    const pageNum = parseInt(targetPage, 10);
    if (!isNaN(pageNum) && viewerRef.current) {
      viewerRef.current.jumpToPage(pageNum - 1); // 注意：react-pdf-viewer页码从0开始计数
    }
  };

  return (
    <div className="w-full h-screen flex flex-col">
      {/* 页码跳转控制区 */}
      <div className="p-4 flex gap-2 items-center border-b">
        <input
          type="number"
          placeholder="输入页码"
          value={targetPage}
          onChange={(e) => setTargetPage(e.target.value)}
          className="px-3 py-2 border rounded"
          min="1"
        />
        <button
          onClick={jumpToPage}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          跳转至指定页面
        </button>
      </div>

      {/* PDF查看器 */}
      <div className="flex-1">
        <Viewer
          fileUrl={pdfUrl}
          ref={viewerRef}
          plugins={[defaultLayoutPluginInstance]}
        />
      </div>
    </div>
  );
}

代码说明 #

• use client：Next.js App Router模式下需添加，确保组件在客户端渲染；Pages Router无需此配置。
• viewerRef：通过ref获取Viewer实例，调用jumpToPage方法实现跳转，注意内部页码从0开始，输入的实际页码需要减1转换。
• defaultLayoutPlugin：提供默认的PDF查看器布局，自带页码导航、缩放、下载等基础功能，也可按需自定义布局。

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