Skip to content
On this page

PDF Object

Add object to PDF Viewer

Usage

Simple Usage

preview
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.

preview
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
preview
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

preview
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
preview
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.

preview
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.

preview
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>

PropsTypeDefaultDescription
xNumber-Object x position
yNumber-Object y position
pageNumber-Object page position
widthNumber198Object width
heightNumber106Object height
minWidthNumber-Minimum object width when resized, default is half of object's width
minHeightNumber-Minimum object height when resized, default is half of object's height
maxWidthNumber-Maximum object width when resized, default is twice of object's width
maxHeightNumber-Maximum object height when resized, default is twice of object's height
moveableBooleantrueEnable object to move
resizableBooleantrueEnable object to resize
autofocusBooleanfalseFocus on object when object mounted
debugBooleanfalseEnable object debugger

Slots <p-pdf-object>

NameDescription
defaultContent to place inside the <p-pdf-object>

Props <p-pdf-object-addon>

PropsTypeDefaultDescription
positionStringrightAddon position, valid value: left, right, top, bottom

Slots <p-pdf-object-addon>

NameDescription
defaultContent to place inside the <p-pdf-object-addon>

See Also

Released under the MIT License.