如何使用react-pdf-viewer结合onPageChange高亮当前页面边框？

核心逻辑 #

监听onPageChange事件获取当前页码，定位到对应页面的DOM元素，通过CSS类切换添加高亮边框，同时移除上一页的高亮样式。

分步实现 #

1. 绑定页码变化监听
   用你已有的onPageChange插件触发高亮逻辑，这里以常见的PDF查看库场景为例：

   // 假设pdfViewer是你的PDF查看器实例
   pdfViewer.onPageChange = function(activePage) {
     updatePageHighlight(activePage);
   };
   

2. 定义高亮样式
   在CSS中设置显眼的边框样式，可根据需求调整颜色、粗细：

   .highlight-active-page {
     outline: 3px solid #2563eb; /* 深蓝色高亮边框 */
     outline-offset: 4px; /* 边框与页面保持间距，避免遮挡内容 */
     transition: outline 0.15s ease; /* 切换页码时的平滑过渡 */
   }
   

3. 编写高亮切换函数
   找到当前页DOM，替换高亮类，同时清除上一页的高亮：

   function updatePageHighlight(currentPageNum) {
     // 移除之前的高亮元素
     const lastHighlighted = document.querySelector('.highlight-active-page');
     if (lastHighlighted) {
       lastHighlighted.classList.remove('highlight-active-page');
     }
     // 定位当前页DOM（注意：不同库的页面元素属性/类名不同，需根据实际DOM调整）
     // 示例假设页面元素用data-page-number存储页码
     const currentPage = document.querySelector(`.pdf-page[data-page-number="${currentPageNum}"]`);
     if (currentPage) {
       currentPage.classList.add('highlight-active-page');
     }
   }
   

4. 关键注意事项

   • DOM选择器适配：不同PDF查看库的页面元素类名/属性不同，比如pdf.js默认用page类，部分自定义 viewer 会用pdf-page，需打开开发者工具查看实际DOM结构调整选择器。
   • 页码索引一致性：有些库返回的页码是0-based（从0开始），有些是1-based（从1开始），要确保currentPageNum和DOM元素上存储的页码值匹配。
   • 懒加载兼容：如果PDF采用懒加载（滚动到才渲染页面），要结合页面渲染完成事件（比如pdf.js的pageRendered），确保当前页DOM存在后再添加高亮。

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