UnoPDF

Appearance

Create Document - Vuejs ​

In this example we show how you can specify a list of operations to the CreateDocument function. In the example a user can enter a line of text. When they press the create button a new document with that text is created.

This shows the CreateDocument call:

ts
const pdfInfo = await _app.createDocument(null, [
  {
    // create a blank page
    operation: "create-page",
    data: {
      orientation: "landscape",
      size: "a4"
    }
  },
  {
    // add single line text
    operation: "add-single-line-text",
    data: {
      index: 0,
      text: "The user entered:",
      fontsize: "12pt",
      fontfamily: "Helvetica",
      translate: [72, 540]
    }
  },
  {
    // add single line text
    operation: "add-single-line-text",
    data: {
      index: 0,
      text: line.value,
      fontsize: "48pt",
      fontfamily: "Helvetica-Bold",
      translate: [72, 480]
    }
  },
]);

Screenshot ​

Screenshot op create-document

Code ​

vue
<script setup lang="ts">
import { ref } 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 line = ref<string>("");

const create = async () => {
  const _app = app.value?.$el as HTMLPdfApplicationElement;
  // #region create_document
  const pdfInfo = await _app.createDocument(null, [
    {
      // create a blank page
      operation: "create-page",
      data: {
        orientation: "landscape",
        size: "a4"
      }
    },
    {
      // add single line text
      operation: "add-single-line-text",
      data: {
        index: 0,
        text: "The user entered:",
        fontsize: "12pt",
        fontfamily: "Helvetica",
        translate: [72, 540]
      }
    },
    {
      // add single line text
      operation: "add-single-line-text",
      data: {
        index: 0,
        text: line.value,
        fontsize: "48pt",
        fontfamily: "Helvetica-Bold",
        translate: [72, 480]
      }
    },
  ]);
  // #endregion create_document

  const _pdf = document.value?.$el as HTMLPdfDocumentElement;
  if (pdfInfo?.id) {
    _pdf.open(pdfInfo.id);
  }
};

</script>

<template>
  <h1>UnoPdf Example: Create Document in Vue</h1>


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

  <PdfDocument ref="document" />
  <div style="display: flex">
    <div style="padding: 10px">
      <input
        v-model="line"
        type="text"
        placeholder="Type line here"
      >
      <button
        type="button"
        @click="create()"
      >
        Create
      </button>
    </div>
    <div>
      <PdfPages />
    </div>
  </div>
</template>

Running the example ​

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