XFDF Annotations in PDF Showcase Demo Code Sample

1// ES6 Compliant Syntax
2// GitHub Copilot v1.0, Claude 3.5 Sonnet, July 28, 2025
3// File: index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7// XFDF Annotations section
8// 
9// Code to customize the WebViewer to export and import XFDF strings 
10// and annotations.
11//
12
13// Default document with annotations
14const defaultDoc = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/demo-annotated.pdf';
15
16// XFDF string to be loaded as an annotation into the viewer
17let xfdf =
18    `<?xml version="1.0" encoding="UTF-8" ?>
19  <xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
20    <pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" />
21    <fields />
22    <annots />
23    <pages>
24      <defmtx matrix="1,0,0,-1,0,792" />
25    </pages>
26  </xfdf>`
27
28const customizeUI = async (instance) => {
29    // Load the default file
30    await instance.Core.documentViewer.loadDocument(defaultDoc);
31};
32
33// Export annotations from the document as XFDF string
34const extractXFDFFromDocument = async (instance) => {
35    const xfdfString = await instance.Core.annotationManager.exportAnnotations();
36    if (xfdfString) {
37        xfdf = xfdfString;
38    }
39};
40
41// Get the XFDF code from the code block element to insert into the viewer
42const getCodeFromCodeBlock = async (instance) => {
43    const code = document.querySelector('#xfdf-code')?.textContent;
44    if (code) {
45        await instance.Core.annotationManager.importAnnotations(code);
46        instance.Core.documentViewer.refreshAll();
47    }
48};
49
50// Format the XFDF string for better readability in the code block
51const getFormattedXFDF = () => {
52    let formatted = '';
53    let indent = '';
54    const tab = '  ';
55
56    // Clean up the XFDF string by removing unnecessary whitespace
57    const xml = xfdf.replace(/>\s+</g, '><').replace(/></g, '>\n<');
58
59    // Format the cleaned XFDF string
60    xml.split(/>\s*</).forEach((node) => {
61        if (node.match(/^\/\w/)) {
62            indent = indent.substring(tab.length);
63        }
64        formatted += indent + '<' + node + '>\n';
65        if (node.match(/^<?\w[^>]*[^\/]$/)) {
66            indent += tab;
67        }
68    });
69
70    return formatted.substring(1, formatted.length - 2);
71};
72
73
74// WebViewer section
75// 
76// This code initializes the WebViewer with the basic settings
77// that are found in the default showcase WebViewer
78//
79
80const searchParams = new URLSearchParams(window.location.search);
81const history = window.history || window.parent.history || window.top.history;
82const licenseKey = 'YOUR_LICENSE_KEY_HERE'; 
83const element = document.getElementById('viewer');
84
85// Initialize WebViewer with the specified settings
86WebViewer({
87    path: '/lib',
88    serverUrl: null,
89    forceClientSideInit: true,
90    fullAPI: true,
91    css: '../styles/stylesheet.css',
92    ui: 'beta',
93    licenseKey: licenseKey,
94}, element).then((instance) => {
95    // Enable the measurement toolbar so it appears with all the other tools, and disable Cloudy rectangular tool
96    const cloudyTools = [
97        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT,
98        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT2,
99        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT3,
100        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT4,
101    ];
102    instance.UI.enableFeatures([instance.UI.Feature.Measurement, instance.UI.Feature.Initials]);
103    instance.UI.disableTools(cloudyTools);
104
105    // Set default toolbar group to Annotate
106    instance.UI.setToolbarGroup('toolbarGroup-Annotate');
107
108    // Set default tool on mobile devices to Pan.
109    // https://apryse.atlassian.net/browse/WVR-3134
110    if (isMobileDevice()) {
111        instance.UI.setToolMode(instance.Core.Tools.ToolNames.PAN);
112    }
113
114    instance.Core.documentViewer.addEventListener('documentUnloaded', () => {
115        if (searchParams.has('file')) {
116            searchParams.delete('file');
117            history.replaceState(null, '', '?' + searchParams.toString());
118        }
119    });
120
121    instance.Core.annotationManager.enableAnnotationNumbering();
122
123    instance.UI.NotesPanel.enableAttachmentPreview();
124
125    // Add the demo-specific functionality
126    customizeUI(instance).then(() => {
127        // Create UI controls after demo is initialized
128        createUIControls(instance);
129    });
130});
131
132// Function to check if the user is on a mobile device
133const isMobileDevice = () => {
134    return (
135        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
136            window.navigator.userAgent
137        ) ||
138        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
139            window.navigator.userAgent.substring(0, 4)
140        )
141    );
142}
143
144// Cleanup function for when the demo is closed or page is unloaded
145const cleanup = (instance) => {
146    if (typeof instance !== 'undefined' && instance.UI) {
147        // Clean up any resources if needed
148        console.log('Cleaning up xfdf-annotations demo');
149    }
150};
151
152// Register cleanup for page unload
153window.addEventListener('beforeunload', () => cleanup());
154window.addEventListener('unload', () => cleanup());
155
156// UI section
157//
158// Helper code to add controls to the viewer holding the buttons
159// This code creates a container for the buttons, styles them, and adds them to the viewer
160//
161
162// Choose File button
163const filePicker = (instance) => {
164    const button = document.createElement('button');
165    button.className = 'btn-filepicker';
166    button.textContent = 'Choose File';
167    button.onclick = () => {
168        const input = document.createElement('input');
169        input.type = 'file';
170        input.accept = '.pdf';
171        input.onchange = async (event) => {
172            const file = event.target.files[0];
173            if (file) {
174                const doc = await instance.Core.createDocument(file);
175                instance.Core.documentViewer.loadDocument(doc);
176            }
177        };
178        input.click();
179    };
180
181    return button;
182}
183
184// XFDF Modal for displaying and editing XFDF code
185const xfdfModal = (instance) => {
186    const modal = document.createElement('div');
187    modal.className = 'xfdf-modal';
188
189    // Close the modal when clicking outside of it
190    modal.onclick = (event) => {
191        if (event.target === modal) {
192            modal.style.display = 'none';
193        }
194    };
195
196    // Modal content (non-shaded part)
197    const content = document.createElement('div');
198    content.className = 'xfdf-modal-content';
199
200    // header
201    const header = document.createElement('div');
202    header.className = 'xfdf-modal-header';
203
204    // Title
205    const title = document.createElement('h2');
206    title.textContent = 'Form Data';
207
208    // Close button
209    const close = document.createElement('button');
210    close.className = 'btn-xfdf-modal-close';
211    close.textContent = '×';
212    close.onclick = () => {
213        modal.style.display = 'none';
214    };
215
216    // Assemble the modal header
217    header.appendChild(title);
218    header.appendChild(close);
219
220    // Code block for XFDF
221    const codePre = document.createElement('pre');
222    codePre.className = 'xfdf-pre';
223    const codeBlock = document.createElement('code');
224    codeBlock.id = 'modal-xfdf-code';
225    codeBlock.contentEditable = true;
226    codeBlock.textContent = getFormattedXFDF();
227    codeBlock.onchange = () => {
228        xfdf = codeBlock.textContent;
229    };
230    codePre.appendChild(codeBlock);
231
232    // Modal footer
233    const footer = document.createElement('div');
234    footer.className = 'xfdf-modal-footer';
235
236    // Zoom buttons
237    const zoom = document.createElement('div');
238    zoom.className = 'xfdf-modal-zoom';
239
240    // Zoom in button
241    const zoomIn = document.createElement('button');
242    zoomIn.className = 'btn-zoom-in';
243    zoomIn.textContent = '+';
244    zoomIn.onclick = () => {
245        const codeBlock = document.querySelector('#modal-xfdf-code');
246        if (codeBlock) {
247            const currentFontSize = parseFloat(window.getComputedStyle(codeBlock).fontSize);
248            codeBlock.style.fontSize = (currentFontSize + 2) + 'px';
249        }
250    };
251
252    // Zoom label
253    const zoomLabel = document.createElement('span');
254    zoomLabel.textContent = 'Zoom';
255
256    // Zoom out button
257    const zoomOut = document.createElement('button');
258    zoomOut.className = 'btn-zoom-out';
259    zoomOut.textContent = '-';
260    zoomOut.onclick = () => {
261        const codeBlock = document.querySelector('#modal-xfdf-code');
262        if (codeBlock) {
263            const currentFontSize = parseFloat(window.getComputedStyle(codeBlock).fontSize);
264            codeBlock.style.fontSize = (currentFontSize - 2) + 'px';
265        }
266    };
267
268    // Assemble the zoom controls
269    zoom.appendChild(zoomIn);
270    zoom.appendChild(zoomLabel);
271    zoom.appendChild(zoomOut);
272
273    // Ok button to accept changes and close the modal
274    const ok = document.createElement('button');
275    ok.className = 'btn-xfdf-modal-ok';
276    ok.textContent = 'OK';
277    ok.onclick = async () => {
278        xfdf = codeBlock.textContent;
279        modal.style.display = 'none';
280    };
281
282    // Assemble the modal footer
283    footer.appendChild(zoom);
284    footer.appendChild(ok);
285
286    // Append all parts to the modal content
287    content.appendChild(header);
288    content.appendChild(codePre);
289    content.appendChild(footer);
290    modal.appendChild(content);
291
292    return modal;
293};
294
295// XFDF Code Block Element
296const xfdfElement = () => {
297    const wrapper = document.createElement('div');
298    wrapper.className = 'xfdf-wrapper';
299
300    // Open modal for XFDF code block
301    const button = document.createElement('button');
302    button.className = 'btn-modal';
303    button.textContent = 'Open in Dialog';
304    button.onclick = () => {
305        const modal = document.querySelector('.xfdf-modal');
306        if (!modal) {
307            console.error('XFDF modal not found');
308            return;
309        }
310        // Set the XFDF code block content
311        const modalCodeBlock = modal.querySelector('#modal-xfdf-code');
312        if (modalCodeBlock) {
313            modalCodeBlock.textContent = getFormattedXFDF();
314        }
315        modal.style.display = 'block';
316    };
317
318    // Container for the XFDF code block
319    const container = document.createElement('div');
320    container.className = 'xfdf-container';
321
322    // Code block for XFDF
323    const codePre = document.createElement('pre');
324    codePre.className = 'xfdf-pre';
325
326    const codeBlock = document.createElement('code');
327    codeBlock.id = 'xfdf-code';
328    codeBlock.contentEditable = true;
329    codeBlock.textContent = getFormattedXFDF();
330
331    // Assemle the XFDF code block
332    codePre.appendChild(codeBlock);
333    container.appendChild(codePre);
334    wrapper.appendChild(container);
335    wrapper.appendChild(button);
336    return wrapper;
337};
338
339// Export XFDF button
340const exportButton = (instance) => {
341    const button = document.createElement('button');
342    button.className = 'btn-export';
343    button.textContent = 'View Document XFDF';
344    button.onclick = async () => {
345        await extractXFDFFromDocument(instance);
346        const codeBlock = document.querySelector('#xfdf-code');
347        if (codeBlock) {
348            codeBlock.textContent = getFormattedXFDF();
349        }
350    };
351    return button;
352};
353
354// Import XFDF button
355const importButton = (instance) => {
356    const button = document.createElement('button');
357    button.className = 'btn-import';
358    button.textContent = 'Update Document XFDF';
359    button.onclick = async () => {
360        await getCodeFromCodeBlock(instance);
361    };
362    return button;
363};
364
365const createUIControls = (instance) => {
366    // Create a container for all controls
367    const controlsContainer = document.createElement('div');
368    controlsContainer.className = 'button-container';
369
370    // Insert the XFDF modal in the right panel (Notes Panel)
371    const notesPanel = instance.UI.NotesPanel;
372    if (notesPanel) {
373        // Create the modal and append it to the notes panel container
374        const modal = xfdfModal(instance);
375        // Try to find the notes panel element in the DOM
376        setTimeout(() => {
377            const notesPanelElement = document.querySelector('[data-element="notesPanel"]') ||
378                document.querySelector('.NotesPanel') ||
379                document.querySelector('[class*="notes-panel"]');
380
381            if (notesPanelElement) {
382                notesPanelElement.appendChild(modal);
383            } else {
384                // Fallback: append to document body
385                document.body.appendChild(modal);
386            }
387        }, 1000); // Wait for UI to be ready
388    } else {
389        // Fallback: add to main element
390        element.insertBefore(xfdfModal(instance), element.firstChild);
391    }
392
393    // Add the file picker and Import/Export buttons to the controls container
394    controlsContainer.appendChild(filePicker(instance));
395    controlsContainer.appendChild(exportButton(instance));
396    controlsContainer.appendChild(importButton(instance));
397
398    // Add the XFDF code block element and controls container to the viewer
399    element.insertBefore(xfdfElement(), element.firstChild);
400    element.insertBefore(controlsContainer, element.firstChild);
401};