Using Worker with Vue 3

[timpulver]

I tried to use PdfVuer 2.0.1 with Vue.js 3 to display all pages of a PDF (~25 pages).
Because the loading is quite slow, it became obvious that a web worker should be used. Is there currently a way to use the web worker approach with Vue 3?
I did not find a way to load the worker library from pdfjs-dist and pass it on to the internals of PdfVuer to use the worker.

My component:

<template>
  <div v-if="isLoading">
    <div>Loading Manual</div>
  </div>
  <VuePdf
        :src="pdfData"
        v-for="i in numPages"
        :key="i"
        :id="i"
        :page="i"
        annotation
      >
    </VuePdf>
</template>

<script>
import VuePdf from "pdfvuer/dist/pdfvuer.common.js";
import pdfFile from "../assets/pdfs/My_PDF.pdf";

export default defineComponent({
  components: { VuePdf },
  data() {
    return {
      pdfData: undefined,
      numPages: 0,
      currentPage: 1,
      isLoading: true,
    };
  },
  async mounted() {
    this.$nextTick(() => {
      this.pdfData = VuePdf.createLoadingTask(pdfFile);
      this.pdfData.then((pdf) => {
        this.numPages = pdf.numPages;
        this.isLoading = false;
      });
    });
  },
});
</script>

[arkokoley]

Hi Tim,Actually pdfvuer already uses the webworker to download and show the pdf. However, simultaneously rendering and showing all pages of a pdf is a very memory intensive operation and that is a constraints that is coming from pdf.js directly. I am currently trying to implement a rendering mechanism so that only the visible pages of pdf is rendered and the others are deallocated. Planning to share this as a recommended example. On 20-Aug-2021 21:47, Tim Pulver ***@***.***> wrote: I tried to use PdfVuer 2.0.1 with Vue.js 3 to display all pages of a PDF (~25 pages). Because the loading is quite slow, it became obvious that a web worker should be used. Is there currently a way to use the web worker approach with Vue 3? I did not find a way to load the worker library from pdfjs-dist and pass it on to the internals of PdfVuer to use the worker. My component: <template> <div v-if="isLoading"> <div>Loading Manual</div> </div> <VuePdf :src="pdfData" v-for="i in numPages" :key="i" :id="i" :page="i" annotation </VuePdf> </template> <script> import VuePdf from "pdfvuer/dist/pdfvuer.common.js"; import pdfFile from "../assets/pdfs/My_PDF.pdf"; export default defineComponent({ components: { VuePdf }, data() { return { pdfData: undefined, numPages: 0, currentPage: 1, isLoading: true, }; }, async mounted() { this.$nextTick(() => { this.pdfData = VuePdf.createLoadingTask(pdfFile); this.pdfData.then((pdf) => { this.numPages = pdf.numPages; this.isLoading = false; }); }); }, }); </script> —You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or unsubscribe.Triage notifications on the go with GitHub Mobile for iOS or Android.

[timpulver]

Hi Gaurav,
I was wondering if PdfVuer v2.0.1 might not use a web worker by default, because I see the following message in console:

Warning: Setting up fake worker.

[rzdev]

same issue as above, i'm on v.2.0.1 & Vue3 and seeing the same fake worker warning in console.

[rjd22]

I've been working on my own project and don't use pdfvuer but use the source code as inspiration.

To use the web worker properly it needs to be registered to pdfjs. This needs to be done the following way:

import * as pdfjs from 'pdfjs-dist';

import PdfjsWorker from 'file-loader!pdfjs-dist/build/pdf.worker';

pdfjs.GlobalWorkerOptions.workerSrc = PdfjsWorker;

Source: https://github.com/wojtekmaj/react-pdf/blob/ca4453f123af51e2faed39a8a62800901030459a/src/entry.webpack.js

pdfvuer doesn't do this atm.