UnoPDF

Appearance

Adding an image to a Pdf Document - Vuejs ​

In this example we add an svg image 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 create a simple svg image and create a data url for that:

ts
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" font-family="helvetica">
  <rect fill="black" width="100" height="50"/>
  <text x="50" y="25" fill="#fc0" dominant-baseline="middle" text-anchor="middle">PDF</text>
</svg>`;

const imageData = encodeURIComponent(svg);
const image = `data:image/svg+xml,${imageData}`;

Finally we call the addImage method on the PdfPages component to add the image to the first page (index 0), on a fixed position with fixed height and width:

ts
await _pages.addImage(0, bottom, left, width, height, image);

See below for a full example.

Screenshot ​

Screenshot op add-image

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
    
    //#region construct_image
    const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" font-family="helvetica">
      <rect fill="black" width="100" height="50"/>
      <text x="50" y="25" fill="#fc0" dominant-baseline="middle" text-anchor="middle">PDF</text>
    </svg>`;

    const imageData = encodeURIComponent(svg);
    const image = `data:image/svg+xml,${imageData}`;
    //#endregion construct_image

    const [left, bottom] = [125, 280];
    const [width, height] = [150, 75];

    await nextTick();
    const _document = document.value?.$el;
    if (_document) {
      await nextTick();
      const _pages = pages.value?.$el;
      if (_pages) {
        _document.addEventListener('loaded', async () => {
          //#region add_image
          await _pages.addImage(0, bottom, left, width, height, image);
          //#endregion add_image

        });
        await _document.open(emptyA5PortraitDocument?.id ?? "");


      }
    }
  }
});
</script>

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

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

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

Running the example ​

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