vue-pdfjs-wrapper

A simple Vue.js wrapper component for PDF.js.

Note

This component installs and uses pdfjs-dist, and loads its worker using the worker-loader webpack module.

Install

npm install --save vue-pdfjs-wrapper

Import it into a specific component:

import VuePdfjsWrapper from 'vue-pdfjs-wrapper'
export default {
  components: { VuePdfjsWrapper },
  ...
}

You can also use it globally using the {plugin} export:

import Vue from 'vue'
import { plugin } from 'vue-pdfjs-wrapper'
Vue.use(plugin)

API

Props

pdf-src

Type: [ String ]
Required
The source of the PDF file, should be anything pdfjs.getDocument() Accepts.

scale

Type: Number
Default: 1
Float number describing the scale of the document to be rendered.
Passed to getViewport({ scale })

is-render-text

Type: Boolean
Default: false
This decides whether the text layer should be rendered

Emits

@loaded

Emits: void
Emitted once the pdf is fully loaded and rendered

Example

Component.vue

<template>
  <div>
    <vue-pdfjs-wrapper
      :pdf-src="src"
      :scale="getScale"
      :is-render-text="isRenderText"
      @loaded="onDocumentLoaded"
    />
  </div>
</template>

<script>
  import VuePdfjsWrapper from 'vue-pdfjs-wrapper'

  export default {
    components: { VuePdfjsWrapper },
    data() {
      return {
        src: 'http://url/to/file.pdf',
        scale: 1.5,
        isRenderText: true
      }
    },
    methods: {
      onDocumentLoaded () {
        // Do stuff after document loads
      }
    }
  }
</script>