Skip to content
On this page

PDF Text

Generate text for Pdf Object

Usage

Simple Usage

Lorem ipsum dolor sit amet consectetur adipisicingpreview
vue
<template>
  <p-pdf-text
    text="Lorem ipsum dolor sit amet consectetur adipisicing" />
</template>

Using with PDF Object

Lorem ipsum dolor sit amet consectetur adipisicing
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">
      <p-pdf-text
        v-model="object.src"
        :width="object.width"
        :height="object.height">
        text="Lorem ipsum dolor sit amet consectetur adipisicing" />
    </p-pdf-object>
  </p-pdf-viewer>
</template>

<script lang="ts" setup>
  import FILE from '~/assets/Calibrator-v3.pdf?url'

  interface PdfObject {
    src?: File,
    page?: number,
    x?: number,
    y?: number,
    width?: number,
    height?: number,
  }

  const object = reactive<PdfObject>({
    src   : undefined,
    page  : 1,
    x     : 100,
    y     : 200,
    width : undefined,
    height: undefined,
  })
</script>

Change Font

You can the font using prop font, it importing font from Google Font, default is DM Sans

Lorem ipsum dolor sit amet consectetur adipisicingLorem ipsum dolor sit amet consectetur adipisicingpreview
vue
<template>
  <p-pdf-text font="Indie Flower" text="Lorem ipsum dolor sit amet consectetur adipisicing"/>
  <p-pdf-text font="Satisfy" text="Lorem ipsum dolor sit amet consectetur adipisicing"/>
</template>

Change Color

Lorem ipsum dolor sit amet consectetur adipisicingLorem ipsum dolor sit amet consectetur adipisicingLorem ipsum dolor sit amet consectetur adipisicingpreview
vue
<template>
  <p-pdf-text color="#004C9D" text="Lorem ipsum dolor sit amet consectetur adipisicing" />
  <p-pdf-text color="#23B242" text="Lorem ipsum dolor sit amet consectetur adipisicing" />
  <p-pdf-text color="#E42E2C" text="Lorem ipsum dolor sit amet consectetur adipisicing" />
</template>

Label

You can add label text using prop label.

Lorem ipsum dolor sit amet consectetur adipisicingpreview
vue
<template>
  <p-pdf-text
    label="Noted from Tarjono (TR001)"
    text="Lorem ipsum dolor sit amet consectetur adipisicing" />
</template>

Fixed Font Size

By default, font-size will automatically adjusted to fit the image size and text length. If you want keep font-size fixed all time, add prop fixed-size.

Lorem ipsum dolor adipisicingLorem ipsum dolor adipisicingLorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, maxime. Amet enim soluta?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, maxime. Amet enim soluta?
preview
vue
<template>
  <div class="grid grid-cols-2 grid-rows-2 gap-4">
    <p-pdf-text
      label="Fixed Size"
      text="Lorem ipsum dolor adipisicing"
      fixed-size />
    <p-pdf-text
      label="Default"
      text="Lorem ipsum dolor adipisicing"
    />
    <p-pdf-text
      label="Fixed Size (long text)"
      text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, maxime. Amet enim soluta?"
      fixed-size />
    <p-pdf-text
      label="Default (long text)"
      text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, maxime. Amet enim soluta?"
    />
  </div>
</template>

Binding v-model

You can bind the generated result with v-model.

Lorem ipsum dolor sit amet consectetur adipisicingpreview
vue
<template>
  <p-pdf-text v-model="result" />
</template>

<script lang="ts" setup>
const result = ref<File>()
</script>

result

Encode to base64

If you prefer base64-dataURI format, add modifier .base64 to your v-model.

Lorem ipsum dolor sit amet consectetur adipisicingpreview

result

vue
<template>
  <p-pdf-text text="Lorem ipsum dolor sit amet consectetur adipisicing" v-model.base64="result" />
</template>

<script lang="ts" setup>
const result = ref('')
</script>

API

Props

PropsTypeDefaultDescription
widthNumber198Image's width
heightNumber106Image's width
textString-Image's text
fontStringDM SansText font family, imported from Google Font
colorNumber#4a5362Text color
minSizeNumber11Minimum font size when auto-resize
maxSizeNumber72Maximum font size when auto-resize
sizeNumber16Text font size, only work on fixed-size mode
fixedSizeBooleanfalseEnable fixed-size mode
lineHeightNumber1.5Text line height
paddingNumber12Text padding
labelString-Add label text
labelSizeString12Label's font size
labelColorString#9EA0A2Label's text color
labelFontString-Label's font family
modelValueString-Result of generated image

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
There no props here

Released under the MIT License.