Using Worker with Vue 3
timpulver opened this issue · 4 comments
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>
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.
same issue as above, i'm on v.2.0.1 & Vue3 and seeing the same fake worker warning in console.
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;
pdfvuer doesn't do this atm.