Language Switcher Showcase Demo Code Sample

1// ES6 Compliant Syntax
2// GitHub Copilot (VS Code Extension) - GPT-4 model - July 29, 2025
3// File name: index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const flagsPath = '/api/proxy/apryse-assets/flags/';
8const languages = [
9  {
10    name: 'English',
11    key: 'EN',
12    icon: `${flagsPath}US.svg`,
13    language: 'Language',
14  },
15  {
16    name: 'Français',
17    key: 'FR',
18    icon: `${flagsPath}FR.svg`,
19    language: 'Langue',
20  },
21  {
22    name: '简体中文',
23    key: 'ZH_CN',
24    icon: `${flagsPath}CN.svg`,
25    language: '语言',
26  },
27  {
28    name: '繁體中文',
29    key: 'ZH_TW',
30    icon: `${flagsPath}CN.svg`,
31    language: '語言',
32  },
33  {
34    name: 'Deutsch',
35    key: 'DE',
36    icon: `${flagsPath}DE.svg`,
37    language: 'Sprache',
38  },
39  {
40    name: 'Nederlands',
41    key: 'NL',
42    icon: `${flagsPath}NL.svg`,
43    language: 'Taal',
44  },
45  {
46    name: 'Pусский',
47    key: 'RU',
48    icon: `${flagsPath}RU.svg`,
49    language: 'Язык',
50  },
51  {
52    name: 'Español',
53    key: 'ES',
54    icon: `${flagsPath}ES.svg`,
55    language: 'Idioma',
56  },
57  {
58    name: 'Italiano',
59    key: 'IT',
60    icon: `${flagsPath}IT.svg`,
61    language: 'Lingua',
62  },
63  {
64    name: '日本語',
65    key: 'JA',
66    icon: `${flagsPath}JA.svg`,
67    language: '言語',
68  },
69  {
70    name: '한국어',
71    key: 'KO',
72    icon: `${flagsPath}KO.svg`,
73    language: '언어',
74  },
75  {
76    name: 'Português',
77    key: 'PT_BR',
78    icon: `${flagsPath}PT_BR.svg`,
79    language: 'Linguagem',
80  },
81  {
82    name: 'česky, čeština',
83    key: 'CS',
84    icon: `${flagsPath}CS.svg`,
85    language: 'Jazyk',
86  },
87  {
88    name: 'Ελληνικά',
89    key: 'EL',
90    icon: `${flagsPath}EL.svg`,
91    language: 'Γλώσσα',
92  },
93  {
94    name: 'Magyar',
95    key: 'HU',
96    icon: `${flagsPath}HU.svg`,
97    language: 'Nyelv',
98  },
99  {
100    name: 'Polski',
101    key: 'PL',
102    icon: `${flagsPath}PL.svg`,
103    language: 'Język',
104  },
105  {
106    name: 'українська',
107    key: 'UK',
108    icon: `${flagsPath}UK.svg`,
109    language: 'Мову',
110  },
111  {
112    name: 'Romanian',
113    key: 'RO',
114    icon: `${flagsPath}RO.svg`,
115    language: 'Limbă',
116  },
117  {
118    name: 'Svenska',
119    key: 'SV',
120    icon: `${flagsPath}SV.svg`,
121    language: 'Språk',
122  },
123  {
124    name: 'Türk',
125    key: 'TR',
126    icon: `${flagsPath}TR.svg`,
127    language: 'Dil',
128  },
129  {
130    name: 'ไทย',
131    key: 'TH',
132    icon: `${flagsPath}TH.svg`,
133    language: 'ภาษา',
134  },
135  {
136    name: 'Tiếng Việt',
137    key: 'VI',
138    icon: `${flagsPath}VI.svg`,
139    language: 'Ngôn ngữ',
140  },
141  {
142    name: 'Bahasa Indonesia',
143    key: 'ID',
144    icon: `${flagsPath}ID.svg`,
145    language: 'Bahasa',
146  },
147  {
148    name: 'Melayu',
149    key: 'MS',
150    icon: `${flagsPath}MS.svg`,
151    language: 'Bahasa',
152  },
153  {
154    name: 'हिन्दी',
155    key: 'HI',
156    icon: `${flagsPath}HI.svg`,
157    language: 'भाषा',
158  },
159  {
160    name: 'বাংলা',
161    key: 'BN',
162    icon: `${flagsPath}BN.svg`,
163    language: 'ভাষা',
164  },
165];
166
167// Customize the WebViewer UI
168// Adding of a language selection ribbon to the toolbar.
169// Adding of languages with flags as buttons. These buttons will change the language of the WebViewer UI.
170// The language selection ribbon will be added to the default ribbon group.
171function customizeUI(instance) {
172  const { UI } = instance;
173  const { Tools, documentViewer } = instance.Core;
174
175  // language grouped items that will hold the language buttons
176  const languageGroupedItems = new UI.Components.GroupedItems({
177    dataElement: 'languageGroupedItems',
178    justifyContent: 'center',
179  });
180
181  // Loop through the languages and create buttons for each language
182  for (const key in UI.Languages) {
183    let KEY = key.replace('_', '');
184    let languageButton = new UI.Components.CustomButton({
185      dataElement: `${KEY}languageButton`,
186      title: languages.find(lang => lang.key === key)?.name,
187      img: languages.find(lang => lang.key === key)?.icon,
188      onClick: () => {
189        UI.setLanguage(key.toLowerCase())
190        languageRibbonItem.title = languages.find(lang => lang.key === key)?.language;
191        ribbonGroup.setItems([...ribbonGroup.items, languageRibbonItem]);
192      }
193    });
194
195    // Push the language button to the grouped items
196    languageGroupedItems.items.push(languageButton);
197  }
198
199  // Create the language ribbon item to be added to default ribbon group
200  const languageRibbonItem = new UI.Components.RibbonItem({
201    dataElement: 'toolbarGroup-Language',
202    img: '<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="796 796 200 200" enable-background="new 796 796 200 200" xml:space="preserve"><g><path d="M973.166,818.5H818.833c-12.591,0-22.833,10.243-22.833,22.833v109.333c0,12.59,10.243,22.833,22.833,22.833h154.333		c12.59,0,22.834-10.243,22.834-22.833V841.333C996,828.743,985.756,818.5,973.166,818.5z M896,961.5h-77.167		c-5.973,0-10.833-4.859-10.833-10.833V841.333c0-5.974,4.86-10.833,10.833-10.833H896V961.5z M978.58,872.129		c-0.547,9.145-5.668,27.261-20.869,39.845c4.615,1.022,9.629,1.573,14.92,1.573v12c-10.551,0-20.238-1.919-28.469-5.325		c-7.689,3.301-16.969,5.325-28.125,5.325v-12c5.132,0,9.924-0.501,14.366-1.498c-8.412-7.016-13.382-16.311-13.382-26.78h11.999		c0,8.857,5.66,16.517,14.884,21.623c4.641-2.66,8.702-6.112,12.164-10.351c5.628-6.886,8.502-14.521,9.754-20.042h-49.785v-12		h22.297v-11.986h12V864.5h21.055c1.986,0,3.902,0.831,5.258,2.28C977.986,868.199,978.697,870.155,978.58,872.129z"/><g><g><path d="M839.035,914.262l-4.45,11.258h-15.971l26.355-61.09h15.971l25.746,61.09h-16.583l-4.363-11.258H839.035zM852.475,879.876l-8.902,22.604h17.629L852.475,879.876z"/></g></g></g></svg>',
203    groupedItems: ['languageGroupedItems'],
204    title: 'Language',
205  });
206
207  // Add the language ribbon item to the default ribbon group and tools header
208  const ribbonGroup = UI.getRibbonGroup('default-ribbon-group');
209  ribbonGroup.setItems([...ribbonGroup.items, languageRibbonItem]);
210
211  // Add the language grouped items to the default tools header
212  const toolsHeader = UI.getModularHeader('tools-header');
213  toolsHeader.setItems([...toolsHeader.items, languageGroupedItems]);
214
215  // Set the toolbar group to the new language tools
216  UI.setToolbarGroup('toolbarGroup-Language');
217  documentViewer.setToolMode(Tools.ToolNames.TEXT_SELECT);
218}
219
220WebViewer(
221  {
222    path: '/lib',
223    initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
224    fullAPI: true,
225    enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
226    licenseKey: 'YOUR_LICENSE_KEY', 
227  },
228  document.getElementById('viewer')
229).then((instance) => {
230
231  // Set the initial language to English
232  instance.UI.setLanguage(instance.UI.Languages.EN);
233
234  // Customize the UI after WebViewer is initialized
235  customizeUI(instance);
236
237  console.log('✅ WebViewer loaded successfully.');
238}).catch((error) => {
239  console.error('❌ Failed to initialize WebViewer:', error);
240});