TaTo30 / vue-pdf

PDF component for Vue 3
https://tato30.github.io/vue-pdf/
MIT License
473 stars 66 forks source link

Can't find and highlight umlauts #141

Closed nataliia-obraztsova closed 2 months ago

nataliia-obraztsova commented 2 months ago

Problem description

Text containing umlauts is not highlighted.

Example 1: phrase until umlauts is matched const highlightText = ref('Arbeitszeit richten sich nach der betrieblichen Einteilung. 5. Urlaub Der Arbeitnehmer hat Anspruch auf einen gesetzlichen Mindesturlaub von derzeit 28 Arbeitstagen im Kalenderjahr-ausgehend von einer')

image

Example 2: phrase including umlauts is no longer matched const highlightText = ref('Arbeitszeit richten sich nach der betrieblichen Einteilung. 5. Urlaub Der Arbeitnehmer hat Anspruch auf einen gesetzlichen Mindesturlaub von derzeit 28 Arbeitstagen im Kalenderjahr-ausgehend von einer Fünf-Tage-Woche. ')

image

Expected behavior

String 'Arbeitszeit richten sich nach der betrieblichen Einteilung. 5. Urlaub Der Arbeitnehmer hat Anspruch auf einen gesetzlichen Mindesturlaub von derzeit 28 Arbeitstagen im Kalenderjahr-ausgehend von einer Fünf-Tage-Woche.' is highlighted.

Additional context

PDF document to test

Extraction_Demo_Vertrag_Darth_Vder Galt.pdf

Code to reproduce

<template>
    <VuePDF class="rounded-md border-2 border-gray-400 border-solid p-1 m-4 flex justify-center"
            :page="props.pageNumber || 1"
            :pdf="pdf" text-layer :highlight-text="highlightText3" :highlight-options="highlightOptions"/>

</template>

<script setup lang="ts">
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import { ref } from 'vue'
import '@tato30/vue-pdf/style.css';
import * as PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.6.82/build/pdf.worker.min.mjs'

const props = defineProps({
  pdfURL: {type: String, required: true},
  highlightText: {type: String, required: true},
  pageNumber: {type: Number, required: true}
})
const { pdf } = usePDF(props.pdfURL)

const highlightText3 = ref("Arbeitszeit richten sich nach der betrieblichen Einteilung. 5. Urlaub Der Arbeitnehmer hat Anspruch auf einen gesetzlichen Mindesturlaub von derzeit 28 Arbeitstagen im Kalenderjahr-ausgehend von einer Fünf-Tage-Woche.")
const highlightOptions = ref({
  completeWords: false,
  ignoreCase: true,
})
</script>

<style scoped>
</style>
TaTo30 commented 2 months ago

This issue is not related to umlauts, if You try this text: Die regelmäßige wöchentliche Arbeitszeit betr ägt 38 Stunden the text with umlauts will be highlighted

imagen

In this text von einer Fünf-Tage-Woche the Fünf word has a whitespace (for some reason) in the middle: Fü nf.

That behavior is the same on the Firefox viewer

imagen imagen

This is issue is more related on how the PDF was generated instead of the viewer.