Opening and displaying a document - Vuejs

You must call the open method on the PdfDocument component to load a document.

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

const pdfDocument = ref();

return (
    <>
        <PdfDocument ref="pdfDocument" />
    </>
);

You can then call a method on the reference. In this example we call the open method of the PdfDocument component. The documentId parameter is the document id of a document in your document collections. See the PdfApplication.getDocuments call for more information on how to get the list of all documents.

pdfDocument.value.$el.open(documentId)

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

Screenshot

Code

src/App.vue

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { PageMode, PdfApplication, PdfDocument, PdfPages } 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 }>();
const pdfDocument = ref<{ $el: HTMLPdfDocumentElement }>();

let documents: IPdfDocument[] = [];

onMounted(async () => {
  await nextTick();
  const _app = app.value?.$el;
  if (_app) {
    documents = await _app.getDocuments();
    const _doc = pdfDocument.value?.$el;

    if (_doc && documents.length > 0 && documents[0].id) {
      _doc.open(documents[0].id);
    }
  }

});
</script>

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

  <PdfApplication
    ref="app"
    :publickey="publickey"
    :privatekey="privatekey"
  />
  <PdfDocument ref="pdfDocument" />
  <PdfPages :page-mode="PageMode.Single" />
</template>

Running the example

• Download the vue - Opening and displaying a document project
• Unzip the file to a directory vue-display-document.
  MacOS

  unzip vue-display-document.zip -d vue-display-document

• Open a terminal and go to that directory

  cd vue-display-document

• Install dependencies
  npm

  npm install

  yarn

  yarn

• Start the project
  npm

  npm run start

  yarn

  yarn start