Easy PDF Viewer For Vue 3

Install & Download:

# Yarn
$ yarn add @tato30/vue-pdf
# NPM
$ npm i @tato30/vue-pdf

Description:

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?: PDFDocumentLoadingTask
page?: number
scale?: number
rotation?: number
fitParent?: boolean
width?: number
height?: number
textLayer?: boolean
imageResourcesPath?: string
hideForms?: boolean
intent?: string
annotationLayer?: boolean
annotationsFilter?: string[]
annotationsMap?: object
watermarkText?: string
watermarkOptions?: WatermarkOptions
highlightText?: string
highlightOptions?: HighlightOptions

4. Watermark options.

{
  columns?: number
  rows?: number
  rotation?: number
  fontSize?: number
  color?: string
}

5. Highlight options.

{
  ignoreCase?: boolean
  completeWords?: boolean
}

Preview:

Changelog:

v1.9.6 (03/27/2024)

• Exports style.css explicitly in package.json
• Removed overflow: hidden from container’s styles

v1.9.5 (02/25/2024)

• ‘Loaded’ events has been added in order to have more control about rendering process of page’s layers

v1.9.4 (01/13/2024)

• Add types and support for null and undefined values when reactivity is used with usePDF

v1.9.3 (01/03/2024)

• Highlight all matches found in the same HTML element

v1.9.1 (01/02/2024)

• Added intent prop
• AnnotationsLayer’s imageResourcesPath bind prop fixed

v1.9.0 (12/17/2023)

• Added support for outlines
• Added highlight-text and hightlight-options props
• Added width and height props
• Added a check for undefinied value in usePDF’s src

v1.8.1 (11/16/2023)

• Make usePDF reactive
• watermark-options prop added

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