Highlight Controller >=1.10.0

highlightControl

An object that allows you to programmatically manage text highlighting and remove highlights within the viewer instance.

Name	Description	Type
highlight	Highlight specified keyword(s) (as strings or regular expression patterns) in the PDF document with customizable options	(value: TextHighlight[]) => void
clear	Removes all existing highlights from the PDF document	() => void

TextHighlight

Name	Description	Type
keyword	The keyword or regular expression used to match and highlight text within the PDF document	string | RegExp
highlightColor	Color used to visually highlight the matched text. Accept any valid CSS color format	string
options	(optional) Options that apply when the keyword is a string to fine-tune the matching behaviour	HighlightOptions

HighlightOptions

Name	Description	Type
matchCase	(optional) If set to true, the search will be case-sensitive, requiring an exact match of uppercase and lowercase letters	boolean
wholeWords	(optional) If set to true, only complete words will be matched. Partial word matches will be ignored	boolean

Example

Composition TS

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

// 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: "Dynamic",
      highlightColor: "rgba(255,0,255,0.5)",
      options: { matchCase: true, wholeWords: true },
    },
    {
      // This regular expression matches the word "time" in a case-insensitive manner
      keyword: /time/gi,
      highlightColor: "rgba(255,50,0,0.5)",
    }
  ])
}

const clearHighlight = () => {
  highlightControl.value?.clear()
}

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

<template>
  <div id="vpv">
    <div>
      <button @click="clearHighlight">Clear highlight</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>

Composition JS

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

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

const highlight = () => {
  highlightControl.value?.highlight([
    {
      keyword: "Dynamic",
      highlightColor: "rgba(255,0,255,0.5)",
      options: { matchCase: true, wholeWords: true },
    },
    {
      // This regular expression matches the word "time" in a case-insensitive manner
      keyword: /time/gi,
      highlightColor: "rgba(255,50,0,0.5)",
    }
  ])
}

const clearHighlight = () => {
  highlightControl.value?.clear()
}

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

<template>
  <div id="vpv">
    <div>
      <button @click="clearHighlight">Clear highlight</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>

Options TS

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

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // 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: "Dynamic",
          highlightColor: "rgba(255,0,255,0.5)",
          options: { matchCase: true, wholeWords: true },
        },
        {
          // This regular expression matches the word "time" in a case-insensitive manner
          keyword: /time/gi,
          highlightColor: "rgba(255,50,0,0.5)",
        }
      ])
    }

    const clearHighlight = () => {
      highlightControl.value?.clear()
    }

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

<template>
  <div id="vpv">
    <div>
      <button @click="clearHighlight">Clear Highlight</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>

Options JS

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

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref()
    const highlightControl = computed(() => vpvRef.value?.highlightControl)

    const highlight = () => {
      highlightControl.value?.highlight([
        {
          keyword: "Dynamic",
          highlightColor: "rgba(255,0,255,0.5)",
          options: { matchCase: true, wholeWords: true },
        },
        {
          // This regular expression matches the word "time" in a case-insensitive manner
          keyword: /time/gi,
          highlightColor: "rgba(255,50,0,0.5)",
        }
      ])
    }

    const clearHighlight = () => {
      highlightControl.value?.clear()
    }

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

<template>
  <div id="vpv">
    <div>
      <button @click="clearHighlight">Clear Highlight</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>