📄 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

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.