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