UnoPDF

Appearance

Calling methods on the components - Vuejs ​

You can call methods on the components by using a reference.

Use the useRef hook to obtain a reference to the element;

vue
const app = ref<{$el: HTMLPdfApplicationElement}>();


return (
    <template>
        <PdfApplication
            ref="app"
        />
    </template>
);

You can then call a method on the reference. In this example we call the getDocuments method of the PdfApplication component.

ts
app.value.$el.getDocuments();

To ensure that the element is loaded you should call it in the onMounted lifecycle hook and wrap it is a setTimeout.

ts
onMounted(async () => {
  setTimeout(async () => {
    const _app = app.value.$el as HTMLPdfApplicationElement;
    documents.value = await _app.getDocuments();
  }, 0);
});

See below for a full example.

Screenshot ​

Screenshot op calling-methods

Code ​

vue
<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { PdfApplication } from "@tallcomponents/unopdf-vue";
import type { IPdfDocument } 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 }>();
let documents = ref<IPdfDocument[]>([]);

onMounted(async () => {
  await nextTick();
  const _app = app.value?.$el;
  if (_app) {
    documents.value = await _app.getDocuments();
  }
});
</script>

<template>
  <h1>UnoPdf Example: Calling methods in Vue</h1>

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

  <ul>
    <li
      v-for="document in documents"
      :key="document.id!"
    >
      {{ document.originalFileName! }}
    </li>
  </ul>
</template>

Running the example ​

  • Download the vue - Calling methods on the components project
  • Unzip the file to a directory vue-calling-methods.
    shell
    unzip vue-calling-methods.zip -d vue-calling-methods
  • Open a terminal and go to that directory
    shell
    cd vue-calling-methods
  • Install dependencies
    shell
    npm install
    shell
    yarn
  • Start the project
    shell
    npm run start
    shell
    yarn start