PDF.js v4-默认打开findBar

Question

我使用pdfjs-4.0.379嵌入了PDF，在之前的版本（版本2）中我有类似的东西：

...
key: "setHash",
    value: function setHash(hash) {
        //aqui
      var pageNumber, dest;      

      if (hash.includes("=")) {
        var params = (0, _ui_utils.parseQueryString)(hash);
        
        if ("search" in params) {
          this.eventBus.dispatch("findfromurlhash", {
            source: this,
            query: params.search.replace(/"/g, ""),
            phraseSearch: params.phrase === "true"
          });
        }
        
         if ('search' in params) { 
              PDFViewerApplication.findBar.open(); 
              PDFViewerApplication.findBar.findField.value = params.search; 
              PDFViewerApplication.findBar.highlightAll.checked = true; 
              PDFViewerApplication.findBar.findNextButton.click(); 
        }
...

但是我如何在当前版本中实现它？

我在此链接中找到了类似的答案，但它并没有真正回答我的问题。

Answer 1

让我向您展示一种可能的方法。我使用

pdfjs-viewer-element

只是为了简化 PDF.js 设置：

1. 安装

   pdfjs-viewer-element

   ：

<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>

2. 使用

   viewer-path

   指定 PDF.js 发布目录，并使用

   src

   属性指定 PDF 文件的路径。

<pdfjs-viewer-element
  id="viewer"
  src="/public/sample-pdf-with-images.pdf"
  viewer-path="/public/pdfjs-4.0.379-dist"
  style="height: 100dvh">
</pdfjs-viewer-element>

3. 等待查看器初始化，然后等待页面加载。最后打开查找栏并搜索：

document.addEventListener('DOMContentLoaded', async () => {
  const viewer = document.querySelector('#viewer')
  // Wait for the viewer initialization
  const viewerApp = await viewer.initialize()
  // Wait for pages loaded, open find bar and search
  viewerApp.eventBus.on('pagesloaded', () => {
    viewerApp.findBar.open()
    viewerApp.findBar.findField.value = 'na' 
    viewerApp.findBar.highlightAll.checked = true
    viewerApp.findBar.findNextButton.click()
  })
})

查看完整示例https://github.com/alekswebnet/pdfjs-viewer-element/blob/master/demo/opened-findbar.html