question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Browser zoom issue: pdfRender.cancel() is undefined

See original GitHub issue

Hi, I have discovered a weird bug that seems to be related to the zoom level of my browser. pdfjsWrapper.js throws a TypeError if I try to mount the pdf component unless the i have the zoom set at the default 100% (or at 50% on an HDPI enabled)

My browser: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Edit: I created a repository and reproduced this on my laptop with Safari and Chrome, with the same behavior. https://github.com/stofi/vue-pdf-resize-issue

TypeError: pdfRender.cancel() is undefined
    renderPage pdfjsWrapper.js:196
    resize componentFactory.js:76
    VueJS 4
    method backend.js:3552
    handler resize-sensor.vue:49
    VueJS 11
    update resize-sensor.vue:39
    VueJS 33
client.js:103
Uncaught (in promise) TypeError: this.messageHandler is null
    getAnnotations pdf.js:14354
    getAnnotations pdf.js:12869
    pendingOperation pdfjsWrapper.js:236
    promise callback*PDFJSWrapper/this.renderPage pdfjsWrapper.js:233
    pdfRenderOperation pdfjsWrapper.js:263
    promise callback*PDFJSWrapper/this.renderPage/pendingOperation< pdfjsWrapper.js:257
    promise callback*PDFJSWrapper/this.renderPage pdfjsWrapper.js:233
    resize componentFactory.js:76
    VueJS 4
    method backend.js:3552
    handler resize-sensor.vue:49
    VueJS 5
pdf.js:14354

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:4
  • Comments:6

github_iconTop GitHub Comments

24reactions
stoficommented, Jul 25, 2021

@xeno my resolution was to wrap vue-pdf in a wrapper component with errorCaptured hook, to prevent nuxt rerouting to an error page. The pdf seems to render fine despite this error.

<script>
import pdf from 'vue-pdf'

export default {
  name: 'PdfViewer',
  components: {
    pdf,
  },
  props: {
    src: {
      type: String,
      default: '',
    },
  },
  errorCaptured() {
    return false
  },
}
</script>
2reactions
windsongdvcommented, Oct 21, 2021

A different solution, found in Issue #334

In package.json, instead of vue-pdf ^4.3.0 use "vue-pdf": "4.2.0",

I also had to add "pdfjs-dist": "2.5.207", to compile.

Credit for this solution goes to the poster in #334

Read more comments on GitHub >

github_iconTop Results From Across the Web

Render of Peer Video fails after repeat video call session
Hi, (We are using Ionic VueJS) We are struggling how to make the renderVideo stable. On first session (video call), it will work...
Read more >
Using pdf.js to render a PDF but it doesn't work and I don't get ...
I'm not familiar with this Promise syntax, so I can't be sure if the problem is there or how I'm passing in the...
Read more >
Rendering PDF pages with PDF.js and Vue - rossta.net
This tutorial demonstrates how to create Vue.js components that can render PDFs along with tools like webpack, PDF.js, and the canvas ...
Read more >
Bootstrap File Input Options - © Kartik - Krajee JQuery Plugins
For browsers which do not support the image-orientation CSS property, you must load the Piexifjs plugin by hMatoba before the fileinput.js script. function()...
Read more >
Adjusting zoom settings in Chrome browser
If you need to adjust the size of website content, use the ZOOM feature of Google Chrome to shrink or magnify text and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found