fumtydt
vue-pdf-kit
A high-definition PDF viewer component for Vue 2 & Vue 3.
Features
- Ensures high-definition rendering of PDFs.
- Renders PDF documents in Vue applications, with support for both Vue 2 and Vue 3.
- Enables text selection and search within the rendered PDF documents.
- Supports rendering annotations within PDF.
Installation & Usage
npm install vue-pdf-kityarn add vue-pdf-kitUsage
<script setup>
import VuePdfKit from 'vue-pdf-kit'
import 'vue-pdf-kit/dist/style.css'
</script>
<template>
<VuePdfKit source="<url> | <base64>" enableTextLayer enableAnnotation />
</template>If you want to use the component in Vue 2.6, you will install it as follows:
npm i @vue/composition-apiProps
| Name | Type | Accepted values | Description |
|---|---|---|---|
| source | string `object |
URL or Base64 | Source of the document to display |
| scale | number |
numbers | The ratio of canvas size to document size |
| enableTextLayer | boolean |
true or false |
whether the text layer should be enabled |
| enableAnnotation | boolean |
true or false |
Whether annotations should be enabled |
| password | string |
Any string | Password for encrypted documents, if required |
| enableCMap | boolean |
true or false |
Enables Character Maps for accurate text rendering |
Events
| Name | Value | Description |
|---|---|---|
| progress | 0-1 number |
Represents the current progress or completion ratio of a task or operation, expressed as a percentage. |
| password | {callback:()=>{}} |
Contains properties related to password handling. |
License
MIT License. Please see LICENSE file for more information.