Highlighting Multiple Keywords

---

If you are looking to highlighting multiple keywords, you have come to the right place. Vue PDF Viewer provides the Highlight Controller API to achieve this objective. This tutorial will guide you on how to highlight two keywords using both string and RegExp, applying two different colors respectively.

Here is a technical summary of what the example will consist of:

1. VPdfViewer: Display the PDF document
2. Highlight Controller: Manage keyword highlighting
3. Computed Properties & Watchers: Reactively update highlights when needed

Breakdown step by step

1. Setting Up the PDF Viewer

The VPdfViewer component is responsible for rendering the PDF file inside your Vue application. To initialize and load the viewer, you need to provide a valid PDF file source through the src prop. Additionally, using the ref attribute allows us to interact with the viewer programmatically, enabling features such as keyword highlighting.

Here is how to create a VPdfViewer component for highlighting.

<VPdfViewer ref="vpvRef" :src="pdfFile" />

2. Implementing Keyword Highlighting

With highlightControl, you can specify multiple objects of keyword and highlightColor to find a matching string and apply corresponding color respectively.

Here is how you can pass values to find keyword(s) and highlight with different colors.

highlightControl.value?.highlight([
  {
    keyword: "Mohammad R. Haghighat",
    highlightColor: "rgba(0, 255, 0, 0.5)", // Green color
  },
  {
    // This regular expression matches the word "type" in a case-insensitive manner
    keyword: /type/gi,
    highlightColor: "rgba(0, 0, 255, 0.5)", // Blue color
  },
]);

Ensure that the highlightColor value includes opacity so the highlighted text remains visible.

Remark: For more details of each method, you may refer to TextHighlight.

3. Computed Properties & Watchers: Reactively updates highlights when needed

Computed properties and watchers help ensure that the highlighting feature updates dynamically when the viewer is initialized or when the PDF file changes.

• Computed Property (highlightControl): Retrieve the highlight control instance from the VPdfViewer component, allowing access to the highlighting API
• Watcher (watch(vpvRef, ...)): Listen for changes in the VPdfViewer instance and triggers the highlight function when the viewer is ready

Here is how you can add computed properties and watchers to highlightControl.

const highlightControl = computed(() => vpvRef.value?.highlightControl);

watch(vpvRef, (vpvInstance) => {
  if (!vpvInstance) return;
  highlight();
});

Complete Example

How Each Part Works Together

1. VPdfViewer Component: This component is responsible for displaying the PDF file in the application.
2. Ref (vpvRef): Create a reference to interact with VPdfViewer and access its highlight control API.
3. Highlight Control: Compute the highlightControl by retrieving it from vpvRef, allowing us to apply highlights programmatically.
4. Highlight Function: This function calls highlightControl.highlight() and provides an array of keywords with specific highlight colors and options.
5. Watcher (watch): Watch vpvRef and trigger the highlight function once the component is available, ensuring the highlights are applied once the PDF is loaded.

Here is a complete example of how you can find and highlight keywords programmatically.

Composition TS

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import { ref, computed, watch } from "vue";

const DEFAULT_FILE =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const pdfFile = ref<string>(DEFAULT_FILE);

// Create a ref to hold the VPdfViewer component
const vpvRef = ref<InstanceType<typeof VPdfViewer>>();
const highlightControl = computed(() => vpvRef.value?.highlightControl);

const highlight = () => {
  highlightControl.value?.highlight([
    {
      keyword: "Mohammad R. Haghighat",
      highlightColor: "rgba(0, 255, 0, 0.5)", // Green color
    },
    {
      // This regular expression matches the word "type" in a case-insensitive manner
      keyword: /type/gi,
      highlightColor: "rgba(0, 0, 255, 0.5)", // Blue color
    },
  ]);
};

watch(vpvRef, (vpvInstance) => {
  if (!vpvInstance) return;
  // Initiate the highlight
  highlight();
});
</script>

<template>
  <div :style="{ width: '100%', height: '100%' }">
    <VPdfViewer ref="vpvRef" :src="pdfFile" />
  </div>
</template>

Composition JS

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import { ref, computed, watch } from "vue";

const DEFAULT_FILE =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const pdfFile = ref(DEFAULT_FILE);

// Create a ref to hold the VPdfViewer component
const vpvRef = ref(null);
const highlightControl = computed(() => vpvRef.value?.highlightControl);

const highlight = () => {
  highlightControl.value?.highlight([
    {
      keyword: "Mohammad R. Haghighat",
      highlightColor: "rgba(0, 255, 0, 0.5)", // Green color
    },
    {
      // This regular expression matches the word "type" in a case-insensitive manner
      keyword: /type/gi,
      highlightColor: "rgba(0, 0, 255, 0.5)", // Blue color
    },
  ]);
};

watch(vpvRef, (vpvInstance) => {
  if (!vpvInstance) return;
  // Initiate the highlight
  highlight();
});
</script>

<template>
  <div :style="{ width: '100%', height: '100%' }">
    <VPdfViewer ref="vpvRef" :src="pdfFile" />
  </div>
</template>

Options TS

<script lang="ts">
import { defineComponent, ref, computed, watch } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default defineComponent({
  components: {
    VPdfViewer,
  },
  setup() {
    const DEFAULT_FILE =
      "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
    const pdfFile = ref<string>(DEFAULT_FILE);

    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>();
    const highlightControl = computed(() => vpvRef.value?.highlightControl);

    const highlight = () => {
      highlightControl.value?.highlight([
        {
          keyword: "Mohammad R. Haghighat",
          highlightColor: "rgba(0, 255, 0, 0.5)", // Green color
        },
        {
          // This regular expression matches the word "type" in a case-insensitive manner
          keyword: /type/gi,
          highlightColor: "rgba(0, 0, 255, 0.5)", // Blue color
        },
      ]);
    };

    watch(vpvRef, (vpvInstance) => {
      if (!vpvInstance) return;
      // Initiate the highlight
      highlight();
    });

    return {
      pdfFile,
      vpvRef,
    };
  },
});
</script>

<template>
  <div :style="{ width: '100%', height: '100%' }">
    <VPdfViewer ref="vpvRef" :src="pdfFile" />
  </div>
</template>

Options JS

<script>
import { defineComponent, ref, computed, watch } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default defineComponent({
  components: {
    VPdfViewer,
  },
  setup() {
    const DEFAULT_FILE =
      "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
    const pdfFile = ref(DEFAULT_FILE);

    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref(null);
    const highlightControl = computed(() => vpvRef.value?.highlightControl);

    const highlight = () => {
      highlightControl.value?.highlight([
        {
          keyword: "Mohammad R. Haghighat",
          highlightColor: "rgba(0, 255, 0, 0.5)", // Green color
        },
        {
          // This regular expression matches the word "type" in a case-insensitive manner
          keyword: /type/gi,
          highlightColor: "rgba(0, 0, 255, 0.5)", // Blue color
        },
      ]);
    };

    watch(vpvRef, (vpvInstance) => {
      if (!vpvInstance) return;
      // Initiate the highlight
      highlight();
    });

    return {
      pdfFile,
      vpvRef,
    };
  },
});
</script>

<template>
  <div :style="{ width: '100%', height: '100%' }">
    <VPdfViewer ref="vpvRef" :src="pdfFile" />
  </div>
</template>

Bonus: Highlight with Match Case

If you are looking to highlight keywords using match case, Vue PDF Viewer provides HighlightOptions to implement your use case quickly.

Here is how you can use matchCase to highlight programmatically:

{
  keyword: "Type",
  highlightColor: "rgba(0, 0, 255, 0.5)", // Blue color
  options: { matchCase: true },
}