需求場景

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

技術(shù)棧：pdf.js+vue3

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

pdf.js下載地址

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

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

2、預(yù)覽方案

pdf.js 提供了多種 PDF 預(yù)覽方案（如基于 canvas 渲染的方案），本文選用 iframe 嵌入預(yù)覽方式：先將 pdf.js 部署為獨立的預(yù)覽網(wǎng)站，在生產(chǎn)環(huán)境中，只需通過 iframe 傳入目標(biāo) PDF 文件的地址（即 fileUrl），即可快速實現(xiàn) PDF 預(yù)覽功能。需要注意的是，此處的 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方法傳入關(guān)鍵字文案，進(jìn)行檢索查詢

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

/**
 * 接收關(guān)鍵字文案作為參數(shù)
 * @param {string} query - 要搜索的文案
 */
 const handleSearch= (query) => {
  const searchText = query ||''
  try {
    // 獲取PDF Viewer的相關(guān)對象
    const frameWindow = pdfFrame.value.contentWindow;
    const findBar = frameWindow.PDFViewerApplication.findBar;
    if (findBar) {
      // 設(shè)置搜索參數(shù)
      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('你要查詢的文案')