Office Documents Showcase Demo Code Sample

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKPackage: Office ConversionLive demo

Redact MS Office documents on web apps. Over 100 pre-built features from viewing to collaborating, document manipulation, redaction, and more are available.

This demo allows you to:

• Upload your own MS Office file
• Add and customize form fields
• Edit the layout and content
• Download the updated PDF

Implementation steps To add MS Office documents redaction with WebViewer:

Step 1: Get started with WebViewer in your preferred web stack Step 2: Add the ES6 JavaScript sample code provided in this guide

Once you generate your license key, it will automatically be included in your sample code below.

// ES6 Compliant Syntax
// GitHub Copilot v1, Claude Sonnet 3.5, 2025-07-31
// File: office-documents/index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';

// List of sample Office files
 const officeFiles = [
  {
    displayName: 'Charles Babbage Quote (docx)',
    downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/Quote_.Word.docx'
  },
  {
    displayName: 'MS Word (doc)',
    downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/legal-contract.doc'
  },
  {
    displayName: 'Sales Tracker (xlsx)',
    downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/sales_tracker.xlsx'
  },
  {
    displayName: 'Travel Presentation (pptx)',
    downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/Travel_Presentation_PP.pptx'
  }
];

const element = document.getElementById('viewer');
let theInstance = null;
const onLoad = async (instance) => {
  theInstance = instance;
  instance.Core.documentViewer.addEventListener('documentLoaded', () => {
    // here you can get the document and perform actions on it,
    if(listLoading){ // do nothing here if loading from the list
      listLoading = false;
      return;
    }
    setDownloadLink(null); // hide download link when uploading a local file
    if(theInstance.Core.documentViewer.getDocument().getType() !== 'office') {
      alert('File loaded, but it is not an Office document.');
    }
  });
};

// Initialize WebViewer with the first file in the list
WebViewer(
  {
    path: '/lib',
    licenseKey: licenseKey, 
    initialDoc: officeFiles[0].downloadPath, // Default to the first file in the list
    enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
  },
  element
).then((instance) => {
  onLoad(instance);
});

function setDownloadLink(fileUrl) {
  if (!fileUrl) {
    downloadLink.style.display = 'none'; // Hide the link if no file URL is provided
    return;
  }
  downloadLink.style.display = 'inline'; // Show the link if a file URL is provided
  downloadLink.href = fileUrl;
  downloadLink.download = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);
  downloadLink.textContent = `Download ${downloadLink.download}`;
}

// Create a link to download the current document
const downloadLink = document.createElement('a');
setDownloadLink(officeFiles[0].downloadPath); // Set initial download link

// Create a dropdown for files
const fileSelect = document.createElement('select');

// Populate the dropdown with options
officeFiles.forEach(file => {
  const option = document.createElement('option');
  option.value = file.downloadPath; // Use the full URL as the value
  option.textContent = file.displayName;
  fileSelect.appendChild(option);
});

let listLoading = true; //initial document laoded from list

// set default value for the dropdown
fileSelect.value = officeFiles[0].downloadPath; // Default to first file
fileSelect.onchange = () => {
  listLoading = true; // signal we're loading from list
  // When the selected file changes, load the new document
  theInstance.UI.loadDocument(fileSelect.value);
  setDownloadLink(fileSelect.value); // Update download link
};
const filesLabel = document.createElement('label');
filesLabel.textContent = 'Try these sample Office documents: ';
const uploadLabel = document.createElement('label');
uploadLabel.textContent = 'Or upload with Open File command in the WebViewer UI menu';

// UI section
//
// Helper code to add controls to the viewer holding the buttons and dropdown

// Create a container for all controls (label, dropdown, and buttons)
const controlsContainer = document.createElement('div');

// Apply classes for styling using CSS
filesLabel.className = 'label-class';
uploadLabel.className = 'label-class';
fileSelect.className = 'file-select';
controlsContainer.className = 'control-container';
downloadLink.className = 'label-class';

// Append elements to the controls container
controlsContainer.appendChild(filesLabel);
controlsContainer.appendChild(fileSelect);
controlsContainer.appendChild(uploadLabel)
controlsContainer.appendChild(document.createElement('br'));
controlsContainer.appendChild(downloadLink);
element.insertBefore(controlsContainer, element.firstChild);