vue-pdf-embed

📄 vue-pdf-embed

PDF embed 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-embed.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 vue-pdf-embed

yarn add vue-pdf-embed

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

Usage

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

    <vue-pdf-embed :source="source1" />

    <h1>Base64</h1>

    <vue-pdf-embed :source="source2" />
  </div>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed'

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

export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      source1: '<PDF_URL>',
      source2: {
        data: atob('<BASE64_ENCODED_PDF>'),
      },
    }
  }
})
</script>

Props

Name	Type	Accepted values	Description
page	number	1 to the number of the last page	number of the page to display (displays all pages if not specified)
source	string object	document URL or typed array pre-filled with data	source of the document to display

Events

Name	Value	Description
loading-failed	error object	failed to load document
password-requested	callback function, retry flag	password is needed to display the document
rendering-failed	error object	failed to render document
rendered	–	finished rendering the document

Examples

Basic Usage Demo (JSFiddle)

Advanced Usage Demo (JSFiddle)

License

MIT License. Please see LICENSE file for more information.