---

需求場景

本文主要針對網頁端 PDF 本地預覽場景，支持通過關鍵字對 PDF 進行檢索查詢，當點擊檢索結果列表中的對應關鍵字時，可同步在預覽界面中觸發內容搜索 —— 不僅能精準跳轉到匹配內容所在的 PDF 頁碼，還能對目標文字進行高亮顯示。此外，方案還涵蓋了 iframe 嵌入預覽、文字高亮等核心功能的實現細節，并針對性解決了基于 pdf.js 開發時常見的跨域問題，為網頁端 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”，找到該關鍵詞所在的異常拋出代碼段，并將其注釋掉。若不進行此注釋操作，會觸發跨域錯誤，導致 PDF 文件無法正常加載預覽。

2、預覽方案

pdf.js 提供了多種 PDF 預覽方案（如基于 canvas 渲染的方案），本文選用 iframe 嵌入預覽方式：先將 pdf.js 部署為獨立的預覽網站，在生產環境中，只需通過 iframe 傳入目標 PDF 文件的地址（即 fileUrl），即可快速實現 PDF 預覽功能。需要注意的是，此處的 fileUrl 不僅可以是常規的文件地址，也可以是通過 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（搜索工具欄）對象，若存在則配置搜索參數（設置關鍵字、開啟全量高亮、關閉大小寫敏感）；
  • 觸發 find（執行搜索）和 highlightallchange（應用高亮）事件，完成檢索與高亮；
  • 異常捕獲：通過try-catch處理搜索過程中的錯誤，打印錯誤日志便于排查。
    通過關聯pdf.js的原生 findBar 能力，封裝成簡潔的檢索方法，同時通過加載狀態控制和異常處理，保證搜索功能的穩定性與可用性。

/*** 接收關鍵字文案作為參數* @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('你要查詢的文案')

4、實現效果

??總結

如果這篇【文章】有幫助到你💖，希望可以給我點個贊👍，創作不易，如果有對前端端或者對python感興趣的朋友,請多多關注💖💖💖，咱們一起探討和努力！！！
👨?🔧 個人主頁 : 前端初見