StandardFontDataFactory not initialized with Vite Vue3 in renderTextLayer

[redbloons33]

Attach (recommended) or Link to PDF file here:

demo_file.pdf

Configuration:

• Web browser and its version: Chrome Version 105.0.5195.127 (Official Build) (32-bit)
• Operating system and its version: Win 10 Enterprise 19044.2006
• PDF.js version: Node "pdfjs-dist": "2.16.105"

Steps to reproduce the problem:

1. Install vue3 with vite
2. renderTextLayer

<script>
  const pdfjs = await import('pdfjs-dist/build/pdf');
  const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
  import { renderTextLayer, getDocument } from "pdfjs-dist";
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

  export default {
    async mounted() {
      let that=this
      let loadingTask = getDocument(this.$store.getters.blobURL)
      loadingTask.promise.then((pdf) => {
        for (const pageNumber of [...Array(pdf.numPages).keys()]){
          pdf.getPage(pageNumber+1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({scale: scale});
            var canvas = document.getElementById(`pdfPage${pageNumber+1}`);
            var context = canvas.getContext('2d');
            canvas.height = viewport.height
            canvas.width = viewport.width

            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
              that.createTextLayer(page,canvas)           
            })
          })
        }

      })

    }
    methods: {
      createTextLayer(page,canvas){
        page.getTextContent().then(content => {
          let textLayerDiv=document.getElementById('textLayer'+page.pageNumber) 
          let rect = canvas.getBoundingClientRect()
          textLayerDiv.style.top=`${rect.top}px`
          let scale = rect.height / page.getViewport(1).height
          let viewport = page.getViewport(scale)
          renderTextLayer({ 
            textContent: content,
            container: textLayerDiv,
            viewport,
            textDivs:[] 
          })
        })  
      },
    }
   }
</script>

What went wrong? (add screenshot)

See image below. Console message:

Warning: fetchStandardFontData: failed to fetch file "FoxitSymbol.pfb" with "UnknownErrorException: StandardFontDataFactory not initialized, see the useWorkerFetch parameter.".

Warning: fetchStandardFontData: failed to fetch file "FoxitDingbats.pfb" with "UnknownErrorException: StandardFontDataFactory not initialized, see the useWorkerFetch parameter."

I've tried enabling useWorkerFetch since it is disabled for node by default but it didn't fix anything. I'm guessing I need a custom standardfontdatafactory? Not sure how to do that.

renderTextLayer({ 
          textContent: content,
          container: textLayerDiv,
          viewport,
          textDivs:[],
          useWorkerFetch:true,
          cMapUrl:"../../node_modules/pdfjs-dist/cmaps/" 
        })

[Snuffleupagus]

Install vue3 with vite

Sorry, but that's not a framework that we know anything here and consequently we unfortunately cannot provide any help/support for it.

renderTextLayer

Please note https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (emphasis mine):

If you are developing a custom solution, first check the examples at https://github.com/mozilla/pdf.js#learning and search existing issues. If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us in the Matrix room -- keep in mind that just code snippets won't help us troubleshoot the problem.

I've tried enabling useWorkerFetch since it is disabled for node by default but it didn't fix anything.

In the configuration section you claimed to be using "Chrome Version 105.0.5195.127 (Official Build) (32-bit)" but here you mention Node.js, hence it's not entirely clear what your environment actually is!? Also, note that both useWorkerFetch and cMapUrl are parameters that you need to pass to getDocument; see https://github.com/mozilla/pdf.js/blob/3dc9b427b9aca97a539af0962689fab3d6c41cbf/src/display/api.js#L130-L246

I'm guessing I need a custom standardfontdatafactory?

There's default factories provided for both browsers and Node.js environments, so it should work with the necessary getDocument parameters provided (see above).