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