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:

PDF Document Embed Component For Vue

Changelog:

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
Tags:

Add Comment