[Bug]: Change pdf.js locale #19147

Penguinee · 2024-12-02T11:53:41Z

Penguinee
Dec 2, 2024

Attach (recommended) or Link to PDF file

Hello guys,

we use pdf-viewer as a vue 3 component. Now we search for a way to change the language when the component is used. What we already tried:

Add the locale as a parameter in the iframe src tag
Listen for an event to set it manually (s. example below)

Environment:
Framework: Vue.js 3
Component: pdf-viewer

Notes:
The iframe logs confirm that the locale is being set to Japanese (ja).
Despite the correct locale setting in the logs, the user interface does not update to reflect the new language.

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const defaultIframe = ref<HTMLIFrameElement | null>(null);

const setLocale = (iframe: HTMLIFrameElement | null) => {
  if (iframe) {
    iframe.addEventListener('load', () => {
      const contentWindow = iframe.contentWindow;

      if (contentWindow && contentWindow['PDFViewerApplicationOptions']) {
        console.log(
          'language before:',
          contentWindow['PDFViewerApplicationOptions'].get('locale'),
        );
        contentWindow['PDFViewerApplicationOptions'].set('locale', 'ja');

        console.log(
          'language after:',
          contentWindow['PDFViewerApplicationOptions'].get('locale'),
        );
      } else {
        console.warn('PDFViewerApplicationOptions is not available in the iframe.');
      }
    });
  }
};

onMounted(() => {
  setLocale(defaultIframe.value);
});
</script>

<template>
  <div style="height: 100%">
    <!-- PDFJS viewer -->
    <iframe
      v-if="usePDFjs && showToolbar"
      :height="height"
      :width="width"
      :src="`${props.basePath}/pdfjs/web/viewer-custom.html?file=${props.file}`"
      title="PDF Viewer"
      ref="defaultIframe"
    ></iframe>
  </div>    
</template>

Can you please check on that?
Let me know if this behavior is a known issue or a bug. Or if you have any recommendations for any additional steps or configurations required to ensure the UI updates the language as intended, let me know.

Web browser and its version

Chrome - Version 131.0.6778.86 (Official Build) (64-bit)

Operating system and its version

Windows

PDF.js version

4.4.168

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

Integrate the pdf-viewer as a Vue 3 component in your project.
Attempt to change the language by:

Adding a language parameter to the iframe src.
Implementing an event handler to set the locale manually.

Observe the console logs and the PDF viewer UI.

What is the expected behavior?

The UI should be updated when I set the language via set-function.

What went wrong?

The language in the frontend stays the same after setting in manually to a different language.

Link to a viewer

No response

Additional context

No response

Zohar727 · 2024-12-12T15:02:51Z

Zohar727
Dec 12, 2024

I also have this problem

and i try to edit the html tag <html lang="ja"> ，it's also not work

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Change pdf.js locale #19147

{{title}}

Replies: 1 comment

{{title}}

Select a reply

[Bug]: Change pdf.js locale #19147

Penguinee Dec 2, 2024

Attach (recommended) or Link to PDF file

Web browser and its version

Operating system and its version

PDF.js version

Is the bug present in the latest PDF.js version?

Is a browser extension

Steps to reproduce the problem

What is the expected behavior?

What went wrong?

Link to a viewer

Additional context

Replies: 1 comment

Zohar727 Dec 12, 2024

Penguinee
Dec 2, 2024

Zohar727
Dec 12, 2024