Easy PDF Viewer For Vue 3

An easy PDF viewer component that makes it easier to embed PDF files into your Vue 3 applications.

How to use it:

1. Import the PDF viewer.

import {usePDF, VuePDF} from 'VuePDF'

export default {
  components: {
    VuePDF
  },
  // ...
}

2. Add a PDF to your app.

<template>
  <VuePDF :pdf="pdf" :page="1" />
</template>

export default {
  components: {
    VuePDF
  },
  setup(){
    const { pdf, pages, info } = usePDF("myPDF.pdf")
    console.log(`Document has ${pages} pages`)
    console.log(`Document info: ${info}`)
    return {
      pdf
    }
  }
}

3. Available props to customize the PDF viewer.

pdf: {
  required: true
},
page: {
  type: Number,
  default: 1
},
scale: {
  type: Number,
  default: 1
},
rotation: Number,
"text-layer": Boolean,
"annotation-layer": Boolean

Preview:

Changelog:

v1.7.4 (09/13/2023)

• Bugfix

v1.7.2 (08/24/2023)

• Added support for High DPI screens
• Fixed the position style of loading slot

v1.7.0 (07/25/2023)

• Added support for XFA Forms
• Added watermark text
• annotation-map functionality was improved

v1.5.1 (06/15/2023)

• fix: default rotation

v1.5.0 (06/11/2023)

• fix: annotations values missed when re-render

v1.4.8 (06/07/2023)

• bugfix

v1.3.3 (01/20/2023)

• FIX: usePDF info ref fixed

v1.2.3 (10/11/2022)

• Fix: layers display

Download Details:

Author: TaTo30

Live Demo: https://tato30.github.io/VuePDF/#/basic

Download Link: https://github.com/TaTo30/VuePDF/archive/refs/heads/master.zip

Official Website: https://github.com/TaTo30/VuePDF

Install & Download:

# Yarn
$ yarn add @tato30/vue-pdf

# NPM
$ npm i @tato30/vue-pdf