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:

Easy PDF Viewer For Vue 3

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

Add Comment