PDF Document Embed Component For Vue

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. Available props.

/**
 * Whether the annotation layer should be disabled.
 * @values Boolean
 */
disableAnnotationLayer: Boolean,
/**
 * Whether the text layer should be disabled.
 * @values Boolean
 */
disableTextLayer: Boolean,
/**
 * Desired page height.
 * @values Number, String
 */
height: [Number, String],
/**
 * Component identifier (inherited by page containers with page number
 * postfixes).
 * @values String
 */
id: String,
/**
 * Path for annotation icons, including trailing slash.
 * @values String
 */
imageResourcesPath: String,
/**
 * Number of the page to display.
 * @values Number
 */
page: Number,
/**
 * Desired page rotation angle.
 * @values Number, String
 */
rotation: {
  type: [Number, String],
  validator(value) {
    if (value % 90 !== 0) {
      throw new Error('Rotation must be 0 or a multiple of 90.')
    }
    return true
  },
},
/**
 * Desired ratio of canvas size to document size.
 * @values Number
 */
scale: Number,
/**
 * Source of the document to display.
 * @values String, URL, TypedArray
 */
source: {
  type: [Object, String, Uint8Array],
  required: true,
},
/**
 * Desired page width.
 * @values Number, String
 */
width: [Number, String],

5. Events.

• @loading-failed: failed to load the document
• @password-requested: retry flag password is needed to display the document
• @rendering-failed: failed to render the document
• @rendered: finished rendering the document
• @internal-link-clicked: internal link was clicked
• @printing-failed: failed to print the document

6. API methods.

• render(): (re)render the document
• print: print resolution (number) print document via browser interface

Preview:

Changelog:

v1.1.6 (04/30/2023)

• Bugfixes

v1.1.5 (11/08/2022)

• Add scale prop
• Update print method signature
• Update canvas releasing

v1.1.4 (06/21/2022)

• Update transpiler configuration to support ES5
• Release canvases on unmount

v1.1.3 (06/20/2022)

• Add filename argument to print method
• Fix source sharing issue
• Optimize canvas utilization in Safari
• Add separate Vue 2 typing
• Fix Vue 3 typing

v1.1.2 (05/26/2022)

• Add rotation prop
• Add loaded event
• Fix issue with stale annotations and text layers when re-rendering
• Make imageResourcesPath configurable
• Fix crash on multiple simultaneous rendering calls
• Add print method
• Allow source reuse between component instances

v1.1.1 (03/30/2022)

• Fix Safari support issue
• Add a prepare script to build the library when installing from the repository
• Update source prop to accept Uint8Array

v1.1.0 (02/28/2022)

• Add page width and height props
• Add text layer
• Add annotation layer

v1.0.8 (02/09/2022)

• Fix broken build

v1.0.7 (02/09/2022)

• Add page specific IDs
• Downgrade PDF.js to 2.9.359

v1.0.6 (01/17/2022)

• Update PDF.js to 2.10.377 (support for digital signatures)

v1.0.5 (11/08/2021)

• Rearrange dependencies
• Optimize the build
• Adjust typing for Vue 3

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