📄 pdf-viewer-vue

PDF viewer component for Vue 2 and Vue 3

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.