PDF Text ​

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

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

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

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

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

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

<template>
  <p-pdf-text v-model="result" />
</template>

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

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