Password Protection Showcase Demo Code Sample

1
2// ES6 Compliant Syntax
3// GitHub Copilot (VS Code Extension) - September 29, 2025
4// File: password-protect/index.js
5
6import WebViewer from '@pdftron/webviewer';
7
8const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
9
10const element = document.getElementById('viewer');
11
12let theInstance = null;
13let reloading = false;
14
15const onLoad = async (instance) => {
16  theInstance = instance;
17  theInstance.Core.documentViewer.addEventListener('documentLoaded', () => {
18    if (reloading) {
19      reloading = false;
20      return;
21    }
22    buttonDownload.disabled = true;
23    buttonReload.disabled = true;
24    buttonSetPass.disabled = false;
25  });
26};
27
28WebViewer(
29  {
30    path: '/lib',
31    licenseKey: licenseKey,
32    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/arrest-warrant-signed.pdf',
33    enableFilePicker: true,
34    fullAPI: true, //Required to use the PDFNet API
35  },
36  element
37).then((instance) => {
38  onLoad(instance);
39});
40
41const protectDocument = async (password) => {
42    if (!password) {
43      alert('Please enter a valid password');
44      return;
45    }
46    const { PDFNet, documentViewer } = theInstance.Core;
47    const doc = documentViewer.getDocument();
48    if(doc.type !== 'pdf') {
49      alert('Loaded document is not a PDF\nAborting ...');
50      return;
51    }
52    
53    await PDFNet.initialize();
54    const PDFNetFile = await doc.getPDFDoc();
55    const newHandler = await PDFNet.SecurityHandler.createDefault();
56
57    // Set a new password required to open a document
58    newHandler.changeUserPasswordUString(password);
59
60    newHandler.setPermission(PDFNet.SecurityHandler.Permission.e_print, false);
61    newHandler.setPermission(PDFNet.SecurityHandler.Permission.e_extract_content, true);
62
63    PDFNetFile.setSecurityHandler(newHandler);
64    buttonSetPass.disabled = true;
65    buttonDownload.disabled = false;
66    buttonReload.disabled = false;
67  };
68
69const reloadProtectedDoc = async () => {
70    reloading = true;
71    const doc = theInstance.Core.documentViewer.getDocument();
72    const xfdfString = await theInstance.Core.annotationManager.exportAnnotations();
73    const data = await doc.getFileData({
74      xfdfString,
75    });
76    const arr = new Uint8Array(data);
77    const blob = new Blob([arr], { type: 'application/pdf' });
78
79    theInstance.UI.loadDocument(blob, { filename: doc.getFilename() });
80};
81
82// UI section
83//
84
85const labelMsg1 = document.createElement('label');
86labelMsg1.textContent = 'Open encrypted password-protected documents, and encrypt PDFs with a password protection as well.';
87labelMsg1.textContent += 'Apryse can support 128-bit or 256-bit AES encryption out of the box, or a custom security algorithm can be applied to the PDF.';
88labelMsg1.className = 'formats-label';
89
90const labelMsg2 = document.createElement('label');
91labelMsg2.textContent = 'Use the Open File command in the WebViewer UI menu to upload a document without a password to try protecting';
92labelMsg2.className = 'formats-label-bold';
93
94const labelMsg3 = document.createElement('label');
95labelMsg3.textContent = 'Set a password to protect the document';
96labelMsg3.className = 'formats-label-bold';
97
98const usernameInput = document.createElement('input');
99usernameInput.type = 'text';
100usernameInput.name = 'username';
101usernameInput.autocomplete = 'username';
102usernameInput.value = 'document-protection';
103usernameInput.style.display = 'none'; // Hidden for accessibility
104usernameInput.setAttribute('aria-hidden', 'true');
105
106const passwordInput = document.createElement('input');
107passwordInput.type = 'password';
108passwordInput.name = 'password';
109passwordInput.placeholder = 'Enter password';
110passwordInput.autocomplete = 'Enter new password';
111
112const passwordForm = document.createElement('form');
113passwordForm.onsubmit = async (e) => {
114  e.preventDefault();
115  const password = passwordInput.value;
116  await protectDocument(password);
117};
118
119const buttonSetPass = document.createElement('button');
120buttonSetPass.type = 'submit';
121buttonSetPass.textContent = 'Set Password';
122buttonSetPass.className = 'btn-style';
123
124passwordForm.appendChild(usernameInput);
125passwordForm.appendChild(passwordInput);
126passwordForm.appendChild(buttonSetPass);
127
128// Create a button to download the protected PDF
129const buttonDownload = document.createElement('button');
130buttonDownload.className = 'btn-style';
131buttonDownload.textContent = 'Download Protected Document';
132buttonDownload.disabled = true;
133buttonDownload.onclick = async () => {
134  theInstance.UI.downloadPdf();
135};
136
137const buttonReload = document.createElement('button');
138buttonReload.textContent = 'Reload Protected Document';
139buttonReload.className = 'btn-style';
140buttonReload.disabled = true;
141buttonReload.onclick = async () => {
142  reloadProtectedDoc();
143};
144
145// Create a container for all controls (labels, buttons, etc.)
146const controlsContainer = document.createElement('div');
147controlsContainer.className = 'container-style';
148
149controlsContainer.appendChild(labelMsg1);
150controlsContainer.appendChild(document.createElement('br'));
151controlsContainer.appendChild(labelMsg2);
152controlsContainer.appendChild(document.createElement('br'));
153controlsContainer.appendChild(labelMsg3);
154controlsContainer.appendChild(passwordForm);
155controlsContainer.appendChild(document.createElement('br'));
156controlsContainer.appendChild(buttonDownload);
157controlsContainer.appendChild(buttonReload);
158element.insertBefore(controlsContainer, element.firstChild);
159