A simple PDF Thumbnail Component Viewer for VueJs

PdfThumbnail.vue

<template>
  <div>
    <div class="row">
      <div class="col-sm-4">
        <a :href="fileUrl">
          <canvas :id="_uid" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
// npm install pdfjs-dist
import * as pdfjsLib from 'pdfjs-dist/es5/build/pdf.js'
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`

export default {
  name: 'PdfThumbnail',
  props: {
    fileUrl: {
      type: String,
    },
    width: {
      type: Number,
      default: 200,
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  mounted() {
    this.renderThumbnails()
  },
  methods: {
    async renderThumbnails() {
      console.log(this._uid)
      const worker = new pdfjsLib.PDFWorker()

      let pdf = await pdfjsLib
        .getDocument({ url: this.fileUrl, worker: worker })
        .promise.then((pdf) => pdf)

      const page = await pdf.getPage(1)

      let viewport = page.getViewport({ scale: 1.0 })
      viewport = page.getViewport({ scale: this.width / viewport.width })

      let canvas = document.getElementById(this._uid)
      canvas.height = viewport.height
      canvas.width = viewport.width

      const context = canvas.getContext('2d')

      await page.render({ canvasContext: context, viewport: viewport })
    },
  },
}
</script>

<style>
</style>