pdf.js实现pdf检索对应文本和高亮功能

 <iframe    ref="pdfFrame" width="100%" height="100%" :src="`/pdfjs/web/viewer.html?file=${fileUrl}`" frameborder="0" id="myIframe"></iframe>

/**
 * 接收关键字文案作为参数
 * @param {string} query - 要搜索的文案
 */
 const handleSearch= (query) => {
  const searchText = query ||''
  try {
    // 获取PDF Viewer的相关对象
    const frameWindow = pdfFrame.value.contentWindow;
    const findBar = frameWindow.PDFViewerApplication.findBar;
    if (findBar) {
      // 设置搜索参数
      findBar.findField.value = searchText;
      findBar.highlightAll.checked = true; // 高亮所有匹配项
      findBar.caseSensitive.checked = false; // 不区分大小写
      
      // 搜索和高亮
      findBar.dispatchEvent(new Event('find'));
      findBar.dispatchEvent(new Event('highlightallchange'));
    }
  } catch (error) {
    console.error('PDF搜索失败:', error);
  }
};

const pdfFrame = ref(null);
const isPdfLoaded = ref(false);
// 监听iframe加载完成
onMounted(() => {
  const frame = pdfFrame.value;
  //监听 iframe 加载状态，确保在 PDF 加载完成后才执行搜索操作
  if (frame) {
    frame.onload = () => {
      isPdfLoaded.value = true;
      console.log('PDF viewer loaded successfully');
    };
  }
});

handleSearch('你要查询的文案')