Localization: changing languages in WebViewer UI

WebViewer leverages the i18next library for languages and internationalization support.

Out of the box, WebViewer supports the following languages:

• English (en)
• French (fr)
• German (de)
• Dutch (nl)
• Russian (ru)
• Chinese (Simplified) (zh_cn)

These will come with WebViewer automatically when you download the package. To always find the available languages supported by WebViewer, you can visit the GitHub project.

It is possible to add additional languages to your WebViewer in a few easy steps. Most of the on-screen text values are stored as JSON language files which you can edit in any text editor. Follow the steps below to start:

1. Begin by creating a copy of any of the language files. They can be found under the lib/ui/i18n directory. WebViewer will also use the files from this directory.
2. Rename the new file prefixed with translation- followed by the desired language code (ex. translation-es.json). The language code can be anything and does not have to match an ISO language code.
3. Open the new file and edit the string values for your new language.
4. Save the file and try out the new language in WebViewer!

1{
2  "action": {
3    "apply": "Apply",
4    "applyAll": "Apply all",
5    "cancel": "Cancel",
6    "clear": "Clear",
7    "close": "Close",
8...

To change languages in WebViewer, simply set the defaultLanguage option in your constructor to the language code that you want. This is without the translation- prefix. WebViewer will then instantiate in the language that was set.

1WebViewerConstructor({
2  path: '/path/to/your/webviewer',
3  initialDoc: '/path/to/your/document.pdf',
4  ui: uiOption,
5  defaultLanguage: 'fr', // sets the default language to French
6}, document.getElementById('viewer')).then(instance => {
7
8});

After instantiation, you can change the language programmatically by calling setLanguage on the instance and passing the corresponding language code from the file name. This method overrides defaultLanguage and caches the selection, ensuring the chosen language persists even after a browser refresh.

1WebViewer(...)
2  .then(instance => {
3    // change the language to Spanish
4    instance.UI.setLanguage('es');
5  });

1WebViewer(...)
2  .then(instance => {
3    // change the language to Spanish
4    instance.setLanguage('es');
5  });