PDF Document Embed Component For Vue

Description:

A Vue 3/2 component to embed PDF documents into your app.

How to use it:

1. Import and register the component.

// VUE 3
import VuePdfEmbed from 'vue-pdf-embed'
// VUE 2
import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
export default {
  components: {
    VuePdfEmbed,
  },
  // ...
})

2. Embed a PDF in your app.

<vue-pdf-embed :source="mysource" />
export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      mySource: '<PDF-URL>',
      // or based64 data
      mySource: {
        data: atob('<BASE64-ENCODED-PDF>'),
      },
    }
  }
})

3. Set the number of pages to display.

<vue-pdf-embed :page="10" :source="mysource" />

4. Events.

  • @loading-failed: failed to load document
  • @password-requested: retry flag password is needed to display the document
  • @rendering-failed: failed to render document
  • @rendered: finished rendering the document

Preview:

PDF Document Embed Component For Vue

Download Details:

Author: hrynko

Live Demo: https://jsfiddle.net/hrynko/ct6p8r7k

Download Link: https://github.com/hrynko/vue-pdf-embed/archive/refs/heads/master.zip

Official Website: https://github.com/hrynko/vue-pdf-embed

Install & Download:

# Yarn
$ yarn add vue-pdf-embed

# NPM
$ npm i vue-pdf-embed

You Might Be Interested In:

Tags:

Add Comment