如何在React.js的iframe中添加PDF页码？

要在React的iframe里指定PDF的显示页码，核心是利用PDF渲染器支持的URL查询参数page，下面是具体实现方案：

基础静态实现 #

如果只是固定显示某一页，直接在PDF的URL后拼接?page=页码即可，示例如下：

// 当存在PDF地址（image变量）时，渲染指定页码的iframe
<Iframe
  className="iframes"
  url={`${image}?page=2`} // 将2替换为你需要的目标页码
  width="100%"
  type="application/pdf"
  id="myId"
  height="500px"
  display="initial"
  position="relative"
/>

动态控制页码（推荐） #

如果需要支持用户切换页码或动态调整显示页面，可以用React状态来管理当前页码：

import { useState } from 'react';
import Iframe from 'react-iframe'; // 假设使用react-iframe组件

function PdfViewer({ pdfUrl }) {
  // 用state管理当前页码，默认显示第1页
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <div>
      {/* 页码控制区域 */}
      <button onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}>上一页</button>
      <span>当前页码：{currentPage}</span>
      <button onClick={() => setCurrentPage(prev => prev + 1)}>下一页</button>

      {/* 带动态页码的PDF iframe */}
      <Iframe
        className="iframes"
        url={`${pdfUrl}?page=${currentPage}`}
        width="100%"
        type="application/pdf"
        height="500px"
        display="initial"
        position="relative"
      />
    </div>
  );
}

export default PdfViewer;

注意事项 #

• 兼容性：大部分现代浏览器（Chrome、Firefox、Edge）内置的PDF查看器都支持page参数，但部分第三方PDF插件或旧浏览器可能不兼容。
• PDF访问权限：确保PDF文件可直接访问，若PDF来自后端接口，需确认后端返回的内容支持通过URL参数控制页码（通常前端拼接参数即可，无需后端额外处理）。
• 原生iframe替代：如果不用第三方iframe组件，直接给原生<iframe>的src属性拼接?page=xxx即可实现相同效果。

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