UnoPDF

Appearance

Adding text to a Pdf Document - Vuejs ​

In this example we add text to a pdf document. We start with creating an empty document of size a5 in portrait mode.

ts
const emptyA5PortraitDocument = await _app.createDocument(null, [
  {
    operation: "create-page",
    data: {
      orientation: "portrait",
      size: "a5"
    }
  },
]);

Then we call the addText method on the PdfPages component to add the text to the first page (index 0), on a the specified position in the specified font and color:

ts
await _pages.addText(0, y, x, `UnoPdf`, 'Helvetica', 12, color);

When we wrap that in a loop and do some math we can create a circle of text. See below for a full example.

Screenshot ​

Screenshot op add-text

Code ​

vue
<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { PdfApplication, PdfDocument, PdfPages } from "@tallcomponents/unopdf-vue";

// Note: this example uses Vite and retrieves the keys from the environment. 
// This should not be used in production.
// See the authentication section in the usage guide for more information.

const publickey = import.meta.env.VITE_PUBLIC_KEY;
const privatekey = import.meta.env.VITE_PRIVATE_KEY;

const app = ref<{ $el: HTMLPdfApplicationElement }>();
const document = ref<{ $el: HTMLPdfDocumentElement }>();
const pages = ref<{ $el: HTMLPdfPagesElement }>();

onMounted(async () => {
  await nextTick();

  const _app = app.value?.$el;
  if (_app) {
    //#region create_document
    const emptyA5PortraitDocument = await _app.createDocument(null, [
      {
        operation: "create-page",
        data: {
          orientation: "portrait",
          size: "a5"
        }
      },
    ]);
    //#endregion create_document



    await nextTick();
    const _document = document.value?.$el;
    if (_document) {
      await nextTick();
      const _pages = pages.value?.$el;
      if (_pages) {
        _document.addEventListener('loaded', async () => {
          for (let α = 0; α < 360; α += 360 / 12) {
            const x = 180 - 125 * Math.sin(α * Math.PI / 180);
            const y = 300 + 100 * Math.cos(α * Math.PI / 180);

            const [r, g, b] = [α, 128, 0];
            const color = `rgb(${r} ${g} ${b})`;
            //#region add_text
            await _pages.addText(0, y, x, `UnoPdf`, 'Helvetica', 12, color);
            //#endregion add_text
          }
        });
        await _document.open(emptyA5PortraitDocument?.id ?? "");
      }
    }
  }
});
</script>

<template>
  <h1>UnoPdf Example: Add Text in Vue</h1>

  <PdfApplication
    ref="app"
    :publickey="publickey"
    :privatekey="privatekey"
  />

  <PdfDocument ref="document" />
  <PdfPages ref="pages" />
</template>

Running the example ​

  • Download the vue - Adding text to a Pdf Document project
  • Unzip the file to a directory vue-add-text.
    shell
    unzip vue-add-text.zip -d vue-add-text
  • Open a terminal and go to that directory
    shell
    cd vue-add-text
  • Install dependencies
    shell
    npm install
    shell
    yarn
  • Start the project
    shell
    npm run start
    shell
    yarn start