PDF embed component for Vue 2 and Vue 3

• Controlled rendering of PDF documents in Vue apps
• Handles password protected documents
• Includes text layer (searchable and selectable documents)
• Includes annotation layer (annotations and links)
• No peer dependencies or additional configuration required
• Can be used directly in the browser (see Examples)

This package is compatible with both Vue 2 and Vue 3, but consists of two separate builds. The default exported build is for Vue 3, for Vue 2 import dist/vue2-pdf-embed.js (see Usage).

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>

<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:application/pdf;base64,<BASE64_ENCODED_PDF>',
    }
  }
}
</script>

Besides the component itself, the module also includes a getDocument function for manual loading of PDF documents, which can then be used as the source prop of the component. In most cases it is sufficient to specify the source prop with a URL or typed array, while the result of the getDocument function can be used in special cases, such as sharing the source between multiple component instances. This is an advanced topic, so it is recommended to check the source code of the component before using this function.

Basic Usage Demo (JSFiddle)

Advanced Usage Demo (JSFiddle)

MIT License. Please see LICENSE file for more information.