1// ES6 Compliant Syntax
2// GitHub Copilot v1.0, GPT-4o model v1.0, July 10, 2025
3// File name: index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const initialDoc = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/pdf_text_editing_walkthrough.pdf';
8const disabledElements = [
9 'toolbarGroup-View',
10 'toolbarGroup-Annotate',
11 'toolbarGroup-Shapes',
12 'toolbarGroup-Redact',
13 'toolbarGroup-Insert',
14 'toolbarGroup-FillAndSign',
15 'toolbarGroup-Forms',
16 'toolbarGroup-Measure',
17 'cropToolGroupButton',
18];
19const EnabledElements = [
20 'toolbarGroup-EditText',
21 'addParagraphToolGroupButton',
22 'addImageContentToolGroupButton',
23 'searchAndReplace',
24];
25
26WebViewer(
27 {
28 path: '/lib',
29 initialDoc: initialDoc,
30 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
31 licenseKey: 'YOUR_LICENSE_KEY',
32 },
33 document.getElementById('viewer')
34).then((instance) => {
35
36 // customize WebViewer UI
37 customizeUI(instance);
38
39 console.log('✅ WebViewer loaded successfully.');
40}).catch((error) => {
41 console.error('❌ Failed to initialize WebViewer:', error);
42});
43
44const customizeUI = (instance) => {
45 const { UI } = instance;
46
47 // Enable the tools to edit the PDF content
48 UI.enableFeatures([UI.Feature.ContentEdit]);
49
50 // disable unnecessary elements and enable the text editing tools
51 UI.disableElements(disabledElements);
52 UI.enableElements(EnabledElements);
53
54 // Set the toolbar group to the text editing tools
55 UI.setToolbarGroup('toolbarGroup-EditText');
56
57 // Reset Walkthrough button
58 const resetButton = new UI.Components.CustomButton({
59 dataElement: 'resetButton',
60 className: 'custom-button-class',
61 label: 'Reset Walkthrough',
62 onClick: () => UI.loadDocument(initialDoc), // Reset the viewer to the initial state
63 style: {
64 backgroundColor: 'white',
65 color: 'blue',
66 border: '1px solid blue',
67 }
68 });
69
70 // Download Pdf button
71 const downloadButton = new UI.Components.CustomButton({
72 dataElement: 'downloadPdfButton',
73 className: 'custom-button-class',
74 label: 'Download as PDF',
75 onClick: () => downloadPdf(instance), // Download the PDF with annotations
76 style: {
77 backgroundColor: 'blue',
78 color: 'white',
79 }
80 });
81
82 const defaultHeader = UI.getModularHeader('default-top-header');
83 defaultHeader.setItems([...defaultHeader.items, resetButton, downloadButton]);
84};
85
86const downloadPdf = async (instance) => {
87 const options = {
88 flags: instance.Core.SaveOptions.LINEARIZED,
89 downloadType: 'pdf'
90 };
91
92 instance.UI.downloadPdf(options);
93};