searching within PDFs about vue-pdf HOT 7 CLOSED

Use str.includes() is pretty optimistic. Not sure that this way it is possible to find anything compare to original search controller:
https://github.com/mozilla/pdf.js/blob/master/web/pdf_find_controller.js

Ideally it would be great to integrate PDFFindController and mimic linkService, eventBus and search layer interfaces and functions. But.. it will require some work.

from vue-pdf.

Text searching is usually a default feature of browsers, highlighting as well, i don't get the why the package should do it.

from vue-pdf.

Consider the case of displaying one page at a time. The browser can only search the displayed pages.

from vue-pdf.

In that case, this workaround could works:

const { pdf, pages } = usePDF("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf")


async function searchText(text) {
  const documentProxy = await pdf.value?.promise
  const occurrences = {}

  for (let page = 1; page <= pages.value; page++) {
    const pageProxy = await documentProxy.getPage(page)
    const textContent = await pageProxy.getTextContent()

    const filteredItems = textContent.items.filter(value => value.str.includes(text))
    if (filteredItems.length > 0)
      occurrences[page] = filteredItems
  }
  return occurrences
}

For example, calling searchText('Trace Trees') will return this object with the text being found on page 4 and 5:

{
   "4":[
      {
         "str":"Trace Trees",
         "dir":"ltr",
         "width":54.476691899999985,
         "height":10.9589,
         "transform":[
            10.9589,
            0,
            0,
            10.9589,
            73.17807499999991,
            535.4919000000002
         ],
         "fontName":"g_d0_f1",
         "hasEOL":false
      }
   ],
   "5":[
      {
         "str":"Trace Trees",
         "dir":"ltr",
         "width":44.57197440000001,
         "height":8.9664,
         "transform":[
            8.9664,
            0,
            0,
            8.9664,
            74.17440000000002,
            228.93460000000024
         ],
         "fontName":"g_d0_f1",
         "hasEOL":false
      }
   ]
}

from vue-pdf.

Thanks @TaTo30! I have a use case that requires me to search keywords and highlight the results on the pdf. Would this be possible or is there a workaround for this too?

from vue-pdf.

Would be possible by searching the html element and replace the content but i know that is awful to do. I think both features would be good to implement, i'll think about it

from vue-pdf.

In that case, this workaround could works:

const { pdf, pages } = usePDF("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf")


async function searchText(text) {
  const documentProxy = await pdf.value?.promise
  const occurrences = {}

  for (let page = 1; page <= pages.value; page++) {
    const pageProxy = await documentProxy.getPage(page)
    const textContent = await pageProxy.getTextContent()

    const filteredItems = textContent.items.filter(value => value.str.includes(text))
    if (filteredItems.length > 0)
      occurrences[page] = filteredItems
  }
  return occurrences
}

For example, calling searchText('Trace Trees') will return this object with the text being found on page 4 and 5:

{
   "4":[
      {
         "str":"Trace Trees",
         "dir":"ltr",
         "width":54.476691899999985,
         "height":10.9589,
         "transform":[
            10.9589,
            0,
            0,
            10.9589,
            73.17807499999991,
            535.4919000000002
         ],
         "fontName":"g_d0_f1",
         "hasEOL":false
      }
   ],
   "5":[
      {
         "str":"Trace Trees",
         "dir":"ltr",
         "width":44.57197440000001,
         "height":8.9664,
         "transform":[
            8.9664,
            0,
            0,
            8.9664,
            74.17440000000002,
            228.93460000000024
         ],
         "fontName":"g_d0_f1",
         "hasEOL":false
      }
   ]
}

这种方式，只能匹配关键字，无法搜索匹配比较长的内容，因为items里的str 是很短的内容。有其它办法吗？

from vue-pdf.