/vue-pdf-viewer

Primary LanguageVueMIT LicenseMIT

📄 pdf-viewer-vue

PDF viewer component for Vue 2 and Vue 3

npm npm Github Repo stars npm

Compatibility

This package is compatible with both Vue 2 and Vue 3. The default exported build is for Vue 3, but dist directory also contains a build for Vue 2 (dist/vue2-pdf-viewer.js). See the example in Usage section.

Installation

Depending on the environment, the package can be installed in one of the following ways:

npm install pdf-viewer-vue

yarn add pdf-viewer-vue

<script src="https://unpkg.com/pdf-viewer-vue"></script>

Usage

<template>
  <div>
    <h1>File</h1>

    <PDFViewer
      :source="url"
      style="height: 100vh; width: 100vw"
      @download="handleDownload"
    />

    <h1>Base64</h1>

    <PDFViewer
      :source="base64"
      style="height: 100vh; width: 100vw"
      @download="handleDownload"
    />
  </div>
</template>

<script>
import PDFViewer from 'pdf-viewer-vue'

// OR THE FOLLOWING IMPORT FOR VUE 2
// import PDFViewer from 'pdf-viewer-vue/dist/vue2-pdf-viewer'

export default {
  components: {
    PDFViewer,
  },

  data() {
    return {
      url: '<PDF_URL>',
      base64: '<BASE64_ENCODED_PDF>',
    }
  },
}
</script>

Props

Name Type Accepted values Description
source string document URL or Base64 source of document
controls string[] [
'download',
'print',
'rotate',
'zoom',
'catalog',
'switchPage',
]		 visible controls
loading-text string - loading text
rendering-text string - rendering text
settings { defaultZoom: number } - default settings
filename string null display filename

Events

Name Value Description
download {source: string; filename: string;} pdf file base info
loaded {total: number} document load completed
loading-failed Error failed to load document
rendered - finished rendering the document
rendering-failed Error failed to render document

Examples

TODO: CodeSandbox or JSFiddle

License

MIT License. Please see LICENSE file for more information.