PHP应用实现浏览器PDF指定页跳转及关键词高亮问题咨询

首先明确：不同浏览器的原生PDF阅读器对URL参数的支持没有统一标准，这是你始终无法实现跨浏览器高亮的核心原因。以下分两种场景给出可行方案：

一、利用浏览器原生参数（仅部分浏览器生效） #

Chromium内核浏览器（Chrome、Edge、Opera等） #

修正你原代码的两处问题：变量名错误（pg#应为pg）、关键词未编码，正确代码如下：

// 单个关键词
window.open(`https://Filename.pdf#page=${pg}&search="${encodeURIComponent(word)}"`, '_blank');
// 多个关键词（用空格分隔）
window.open(`https://Filename.pdf#page=${pg}&search="${encodeURIComponent(word1 + ' ' + word2)}"`, '_blank');

注意：参数顺序不影响，但必须确保关键词用双引号包裹，且经过URL编码避免特殊字符干扰。

Firefox #

Firefox的原生PDF阅读器不支持带引号的search参数，直接传入编码后的关键词即可：

window.open(`https://Filename.pdf#page=${pg}&search=${encodeURIComponent(word)}`, '_blank');

Safari #

Safari原生PDF阅读器几乎不支持通过URL参数自动高亮关键词，原生方案无法覆盖该浏览器。

二、跨浏览器通用方案（推荐） #

如果需要在所有浏览器实现稳定的页码跳转+关键词高亮，建议使用Mozilla开源的PDF.js库，完全自定义PDF渲染逻辑：

1. 引入PDF.js的核心库和查看器组件
2. 在页面中创建容器加载PDF文件
3. 通过API实现跳转与高亮：

// 初始化PDF加载（示例代码）
async function loadPDF(pdfUrl, targetPage, keyword) {
  const pdfViewer = document.querySelector('#pdfViewer').querySelector('.pdfViewer');
  const loadingTask = pdfjsLib.getDocument(pdfUrl);
  const pdf = await loadingTask.promise;
  
  // 跳转到指定页码
  pdfViewer.currentPageNumber = targetPage;
  
  // 高亮关键词
  await pdfViewer.findController.executeCommand('find', {
    query: keyword,
    highlightAll: true,
    caseSensitive: false
  });
}

这种方案不受浏览器原生阅读器限制，能实现完全一致的跨浏览器效果。

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