📄 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.