PDF Object

Add object to PDF Viewer

Usage

Simple Usage

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

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

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

<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

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

This is Addon

Drag to move

Drag the handle to resize

100%

 

No Data

of 0

preview

<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

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

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

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

x: 

y: 

page: 

width: 198

height: 106

100%

 

No Data

of 0

preview

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

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

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

Failed to load PDF

URL:

/design-system/assets/pdf/Calibrator-v3.pdf

Reason:

PDFJS Version:

100%

 

No Data

of 0

preview

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

See Also

• PDF Viewer
• Online PDF Debugger