PersonaPDF Object
Add object to PDF Viewer
Usage
Simple Usage
vue
<template>
<p-pdf-viewer :src="FILE">
<p-pdf-object
v-model:page="object.page"
v-model:x="object.x"
v-model:y="object.y"
v-model:width="object.width"
v-model:height="object.height">
<img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
</p-pdf-object>
</p-pdf-viewer>
</template>
<script setup lang="ts">
import FILE from '~/assets/Calibrator-v3.pdf?url'
interface PdfObject {
page?: number,
x?: number,
y?: number,
width?: number,
height?: number,
}
const object = reactive<PdfObject>({
page : undefined,
x : undefined,
y : undefined,
width : undefined,
height: undefined,
})
</script>Object Addon
You can add additional element like action button using <p-object-addon> component.
vue
<template>
<p-pdf-viewer :src="FILE">
<template #header>
<p-button color="primary" class="float-right my-4" @click="add">
Add Object
</p-button>
</template>
<p-pdf-object
v-for="(object, i) in objects"
:key="object._id"
v-model:page="object.page"
v-model:x="object.x"
v-model:y="object.y"
v-model:width="object.width"
v-model:height="object.height">
<img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
<p-pdf-object-addon>
<p-button size="sm" icon color="danger" @click="remove(i)">
<IconClose />
</p-button>
</p-pdf-object-addon>
</p-pdf-object>
</p-pdf-viewer>
</template>
<script setup lang="ts">
import FILE from '~/assets/Calibrator-v3.pdf?url'
interface PdfObject {
_id: symbol,
page?: number,
x?: number,
y?: number,
width?: number,
height?: number,
}
const objects = reactive<PdfObject[]>([])
function add () {
objects.push({
_id : Symbol('ObjectId'),
page : undefined,
x : undefined,
y : undefined,
width : undefined,
height: undefined,
})
}
function remove (index: number) {
objects.splice(index, 1)
}
</script>Addon Position
You can also change addon position using prop position. valid value is: left, top, right, and bottom. Default is right
This is Addon
Drag to move
Drag the handle to resize
vue
<template>
<p-pdf-viewer :src="FILE">
<p-pdf-object
:page="1"
:x="100"
:y="100"
:width="198"
:height="106">
<img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
<p-pdf-object-addon position="left">
This is Addon
</p-pdf-object-addon>
<p-pdf-object-addon position="top">
Drag to move
</p-pdf-object-addon>
<p-pdf-object-addon position="right">
<p-button size="sm" icon color="danger">
<IconClose />
</p-button>
</p-pdf-object-addon>
<p-pdf-object-addon position="bottom">
Drag the handle to resize
</p-pdf-object-addon>
</p-pdf-object>
</p-pdf-viewer>
</template>Autofocus
Add prop autofocus focus on object when the object mounted.
Try it
vue
<template>
<p-pdf-viewer :src="FILE">
<p-pdf-object
v-if="isShow"
:page="page"
:x="100"
:y="100"
:width="198"
:height="106"
autofocus>
<img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
</p-pdf-object>
</p-pdf-viewer>
</template>Debug Mode
Add prop debug to enable debug mode.
x:
y:
page:
width: 198
height: 106
vue
<template>
<p-pdf-viewer :src="FILE">
<p-pdf-object
v-model:page="object.page"
v-model:x="object.x"
v-model:y="object.y"
v-model:width="object.width"
v-model:height="object.height"
debug>
<img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
</p-pdf-object>
</p-pdf-viewer>
</template>Disabled Move
To disable object move, set prop moveable to false.
vue
<template>
<p-pdf-viewer :src="FILE">
<p-pdf-object
:page="1"
:x="400"
:y="300"
:width="198"
:height="106"
:moveable="false">
<img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
</p-pdf-object>
</p-pdf-viewer>
</template>Disabled Resize
To disable object resize, set prop resizable to false.
vue
<template>
<p-pdf-viewer :src="FILE">
<p-pdf-object
v-model:page="object.page"
v-model:x="object.x"
v-model:y="object.y"
v-model:width="object.width"
v-model:height="object.height"
:resizable="false">
<img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
</p-pdf-object>
</p-pdf-viewer>
</template>API
Props <p-pdf-object>
| Props | Type | Default | Description |
|---|---|---|---|
x | Number | - | Object x position |
y | Number | - | Object y position |
page | Number | - | Object page position |
width | Number | 198 | Object width |
height | Number | 106 | Object height |
minWidth | Number | - | Minimum object width when resized, default is half of object's width |
minHeight | Number | - | Minimum object height when resized, default is half of object's height |
maxWidth | Number | - | Maximum object width when resized, default is twice of object's width |
maxHeight | Number | - | Maximum object height when resized, default is twice of object's height |
moveable | Boolean | true | Enable object to move |
resizable | Boolean | true | Enable object to resize |
autofocus | Boolean | false | Focus on object when object mounted |
debug | Boolean | false | Enable object debugger |
Slots <p-pdf-object>
| Name | Description |
|---|---|
default | Content to place inside the <p-pdf-object> |
Props <p-pdf-object-addon>
| Props | Type | Default | Description |
|---|---|---|---|
position | String | right | Addon position, valid value: left, right, top, bottom |
Slots <p-pdf-object-addon>
| Name | Description |
|---|---|
default | Content to place inside the <p-pdf-object-addon> |