需求場景

本文主要針對網頁端 PDF 本地預覽場景，支持通過關鍵字對 PDF 進行檢索查詢，當點擊檢索結果列表中的對應關鍵字時，可同步在預覽界面中觸發(fā)內容搜索 —— 不僅能精準跳轉到匹配內容所在的 PDF 頁碼，還能對目標文字進行高亮顯示。此外，方案還涵蓋了 iframe 嵌入預覽、文字高亮等核心功能的實現細節(jié)，并針對性解決了基于 pdf.js 開發(fā)時常見的跨域問題，為網頁端 PDF 預覽與檢索需求提供了完整技術參考。

技術棧：pdf.js+vue3

1、使用pdf.js+解決pdf.js跨域

pdf.js下載地址

將下載的pdf.js壓縮包解壓并放入到項目中的public文件夾下，如下

在項目的 public/pdfjs/web/viewer.mjs 文件中，搜索關鍵詞 “file origin does not match viewer’s”，找到該關鍵詞所在的異常拋出代碼段，并將其注釋掉。若不進行此注釋操作，會觸發(fā)跨域錯誤，導致 PDF 文件無法正常加載預覽。

2、預覽方案

pdf.js 提供了多種 PDF 預覽方案（如基于 canvas 渲染的方案），本文選用 iframe 嵌入預覽方式：先將 pdf.js 部署為獨立的預覽網站，在生產環(huán)境中，只需通過 iframe 傳入目標 PDF 文件的地址（即 fileUrl），即可快速實現 PDF 預覽功能。需要注意的是，此處的 fileUrl 不僅可以是常規(guī)的文件地址，也可以是通過 URL.createObjectURL() 方法生成的文件流臨時地址。

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

3、檢索方案

封裝一個handleSearch方法傳入關鍵字文案，進行檢索查詢

• 入參：接收 query（string類型，即待搜索的關鍵字文案），并處理空值（默認轉為空字符串）。
• 核心邏輯：
  • 通過 pdfFrame.value.contentWindow 獲取iframe中pdf.js預覽實例的窗口對象；
  • 拿到預覽實例的 findBar（搜索工具欄）對象，若存在則配置搜索參數（設置關鍵字、開啟全量高亮、關閉大小寫敏感）；
  • 觸發(fā) find（執(zhí)行搜索）和 highlightallchange（應用高亮）事件，完成檢索與高亮；
  • 異常捕獲：通過try-catch處理搜索過程中的錯誤，打印錯誤日志便于排查。
    通過關聯pdf.js的原生 findBar 能力，封裝成簡潔的檢索方法，同時通過加載狀態(tài)控制和異常處理，保證搜索功能的穩(wěn)定性與可用性。

/**
 * 接收關鍵字文案作為參數
 * @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; // 不區(qū)分大小寫
      
      // 搜索和高亮
      findBar.dispatchEvent(new Event('find'));
      findBar.dispatchEvent(new Event('highlightallchange'));
    }
  } catch (error) {
    console.error('PDF搜索失敗:', error);
  }
};

const pdfFrame = ref(null);
const isPdfLoaded = ref(false);
// 監(jiān)聽iframe加載完成
onMounted(() => {
  const frame = pdfFrame.value;
  //監(jiān)聽 iframe 加載狀態(tài)，確保在 PDF 加載完成后才執(zhí)行搜索操作
  if (frame) {
    frame.onload = () => {
      isPdfLoaded.value = true;
      console.log('PDF viewer loaded successfully');
    };
  }
});

使用

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

4、實現效果

總結

到此這篇關于pdf.js實現pdf檢索對應文本和高亮功能的文章就介紹到這了,更多相關pdf.js檢索對應文本和高亮內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論