Password Protection Showcase Demo Sample Code

Open encrypted, password-protected PDFs using the correct password, and create new ones with built-in support for 128-bit or 256-bit AES encryption. Easily integrate custom security algorithms to further strengthen PDF protection.

This demo allows you to:

  • Password-Protect PDFs with your own password
  • Download encrypted password-protected PDF
  • Support 128-bit or 256-bit AES encryption
  • Customize encryption

Implementation steps
To add Password Protection capability with WebViewer:

Step 1: Choose your preferred web stack
Step 2: Download required modules listed in the Demo Dependencies section below
Step 3: Add the ES6 JavaScript sample code provided in this guide

Demo Dependencies
This sample uses the following:

Want to see a live version of this demo?

Try the Password Protect demo

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales