Blank screen when trying to reproduce example in vue-cli fresh project

[beliolfa]

I get an empty canvas when I try to reproduce the readme example.

<template>
  <div id="app">
    <pdf
      src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
    ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'App',

  components: { pdf }
}
</script>

I also tried to pass a local pdf and a base64 pdf with no luck.

Thank you for your time.

[beliolfa]

Heres a reproduction repo.

https://github.com/disitec/vue-pdf-issue-repro

[fincardy]

I've currently got the same issue with just the JSfiddle in the readme (here: https://jsfiddle.net/fossfiddler/5k4ptmqg/145/)

The page will render the page numbers and corresponding input, but the Canvas is blank. If you resize the window it'll load the PDF correctly. I've had similar issues when trying to integrate it into my current project.

After some Googling, it seems there could be an issue with Vue 2 and the <canvas> element, but the solutions I've found to that are not appropriate for my configuration (more info here: https://laracasts.com/discuss/channels/vue/vue-interfering-with-html5-canvas-somehow)

Tested in Chrome 64.0.3282.119 & Firefox 57.0.4 on OSX High Sierra (10.13.3).

[FranckFreiburger]

Is there any error in the browser's console ?

[fincardy]

Nope, no console errors on first load or the window resize.

It seems that once it's all loaded you can change the display or opacity property on the Canvas element using DevTools and it'll render it correctly too - though I've not been able to get that working programmatically. It seems to be anything that forces the canvas to redraw.

[fincardy]

Managed to get a hacky fix sorted:

<template>
  <div id="app">
    <div :style="{ maxWidth: pdfWidth }">
      <pdf
        src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
        @loaded="updateWidth"
      />
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'App',
  components: { pdf },
  data() {
     return {
         pdfWidth: '99%'
     }
  },
  methods: {
    updateWidth: function() {
      var that = this;
      setTimeout(function() {
        that.pdfWidth = '100%';
      }, 1000);
    }
  }
}
</script>

Just need to create a wrapper (the PDF component's width is 100%) with a slightly smaller width on it by default, then use a setTimeout called after the document has loaded to change the wrapper size and force a re-render.

It's not ideal (and my Vue knowledge isn't great) but it works :)

[FranckFreiburger]

@fincardy, please try v3.1.4+ without your wrapper