TypeError: Cannot read property 'createAnnotationLayerBuilder' of undefined
jollemannen opened this issue · 10 comments
TypeError: Cannot read property 'createAnnotationLayerBuilder' of undefined
Hi! Im trying to run pdfvuer in my nuxt app but it fails because of the below error. The wierd thing is that the pdf gets rendered if i set the page to page 2.
The error occurs in pdfvuer.umd.js on line 23029 aka the line below
this.pdfViewer.annotationLayer = this.pdfViewer.annotationLayerFactory.createAnnotationLayerBuilder(this.pdfViewer.div, this.pdfViewer.pdfPage);
Can you guys help me with this?
Here is my page where i included pdfvuer:
`
{{data.Name | capitalize({ onlyFirstLetter: true }) }}
Läser in fil. Detta kan ta en stund
</pdf>
</client-only>
<div class="mt-5 p-3" v-if="page != null && pageCount != null && pageCount > 1">
<div class="d-none d-sm-block">
<div class="input-group">
<button class="btn btn-teoark rounded-0" v-on:click="changePage(page - 1)" :disabled="page == 1">Gå till
föregående sida
</button>
<b-form-select v-model="page" v-on:change="onPageChangeScrollTop" class="rounded-0">
<option selected :value="1">Välj sida</option>
<option v-for="(item, index) in options" v-bind:value="item.value">
{{ item.text }}
</option>
</b-form-select>
<button class="btn btn-teoark rounded-0" v-on:click="changePage(page + 1)"
:disabled="page == pageCount">Gå till nästa sida
</button>
</div>
</div>
<div class="row mb-3 d-block d-sm-none">
<div class="col-12">
<button class="btn btn-teoark rounded-0 w-100" v-on:click="changePage(page - 1)" :disabled="page == 1">
Gå till föregående sida
</button>
</div>
<div class="col-12">
<b-form-select v-model="page" v-on:change="onPageChangeScrollTop" class="w-100 rounded-0">
<option selected :value="1">Välj sida</option>
<option v-for="(item, index) in options" v-bind:value="item.value">
{{ item.text }}
</option>
</b-form-select>
</div>
<div class="col-12">
<button class="btn btn-teoark rounded-0 w-100" v-on:click="changePage(page + 1)"
:disabled="page == pageCount">Gå till nästa sida
</button>
</div>
</div>
</div>
<div class="mb-5 p-3">
<p>Visar sida {{ page }} av {{ pageCount }}</p>
</div>
<div class="p-1"></div>
</div>
</b-overlay>
</div>
</div>
`
It happens when I miss this prop.
:annotation="true"
Try passing it.
Even I am trying to do the same in nuxt. I wasn't able to load it with src as .pdf file. Only advanced example is working. Simple example is not working. I use django as backend. with s3 in production environment. I don't need any customization as such. Just simply displaying the pdf would suffice. But I can't do it as this simple example woudn't work.
let me know if you could do it successfully.
@ramsane Thanks for the suggestion it worked when i set it to true but its weird that this issue happens at all.
Is there a more permanent solution since i have annotations in our pdf library that we dont want to be seen.
Regards Joel
I don't know. I was new to this. I am trying to make it work. Is there any way to render page on demand ? I don't wish to render all the pages without scrolling. It makes the page unnecessarily heavy.
Also bump
@ramsane, by default pdfvuer renders one page at a time. You can set the page prop on the component and render only one page at a time.
@arkokoley Is there any solution to the above problem without setting :annotations="true"?
@jollemannen ideally this issue should never have happened.. I'm working on a fix for this. I'll push it out in a day or two.
Thank you for your work @arkokoley
Do you have Github sponsor account?
Thank you @arkokoley. I am having the same issue. It just started yesterday and here is my error message bellow.
TypeError: Cannot read property 'createAnnotationLayerBuilder' of undefined
at a.drawScaled (pdfvuer.umd.js:23034)
at a.scale (pdfvuer.umd.js:22919)
at nt (vue.runtime.esm.js:1863)
at rn.run (vue.runtime.esm.js:4584)
at $r (vue.runtime.esm.js:4326)
at Array. (vue.runtime.esm.js:1989)
at ut (vue.runtime.esm.js:1915)
ot @ vue.runtime.esm.js:1897
"pdfjs-dist": "2.5.207",
"pdfvuer": "^1.7.5",
I tried to set annotation to true. still have the issue.
loading content here...
Many thanks in advance