UnoPDF

Appearance

Highlight fields - Vuejs ​

In this example we allow the user to highlight the fields in a pdf.

Prerequisites ​

This example assumes that there exists a document form.pdf in your storage. If you do not have such a document you can run the following command to add a document with fields under that name:

shell
node src/post-document.js

Screenshot ​

Screenshot op highlight-fields

Code ​

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

onMounted(async () => {
  await nextTick();
  const _app = app.value?.$el;
  if (_app) {
    formDocument.value = (await _app.getDocuments()).find((doc) => doc.originalFileName == "form.pdf");

    const _doc = document.value?.$el;

    if (_doc && formDocument.value && formDocument.value.id) {
      await _doc.open(formDocument.value.id);
    }
  }
});

const toggleHighlight = (ev: Event) => {
  const highlight = (ev.target as HTMLInputElement).checked;
  const _pages = pages.value?.$el;
  _pages?.setHighlightFields(highlight);
};
</script>

<template>
  <h1>UnoPdf Example: HighLight Fields in Vue</h1>

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

  <PdfDocument ref="document" />

  <div style="display: flex">
    <div>
      <PdfPages ref="pages" />
    </div>
    <div>
      <div style="padding: 10px">
        Check the box below to highlight all fields in the document
      </div>
      <div style="padding: 10px">
        <label>
          <input
            type="checkbox"
            value=""
            @change="toggleHighlight"
          >
          <span>Highlight fields</span>
        </label>
      </div>
    </div>
  </div>
</template>

Running the example ​

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