Office to PDF - Showcase Demo

Requirements

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

Web SDKPackage: Office ConversionLive demo

Easily convert MS Office documents to PDF, completely client-side. You can convert from the following formats: DOC, DOCX, DOCM, DOTX, DOTM, DOT, XLSX, XLSM, XLT, XLS, PPTX, PPT, PPTM, PPS, POT.

This code sample follows the Apryse Showcase: MS Office to PDF Conversion Demo, and allows you to:

• Load office documents in native format and convert to PDF

• Edit PDF

• Download updated PDF

Implementation steps

To convert Office files to PDF with WebViewer:

Step 1: Follow get started in your preferred web stack for WebViewer 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, Version: 1.0, Model: GPT-4, Date: 2024-06-09
// File: office-to-pdf/index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';

const element = document.getElementById('viewer');
let theInstance = null;
const onLoad = async (instance) => {
  theInstance = instance;
};

// default document to load
const defaultDoc = 'legal-contract';

WebViewer(
  {
    path: '/lib',
    licenseKey: licenseKey, 
    initialDoc: `https://pdftron.s3.amazonaws.com/downloads/pl/${defaultDoc}.docx`
  },
  element
).then((instance) => {
  onLoad(instance);
});

// Define the target file name for download
let targetFile = `${defaultDoc}.pdf`;

// List of supported Office file formats
const officeExtensions = [
  'doc',
  'docx',
  'docm',
  'dotx',
  'dotm',
  'dot',
  'xlsx',
  'xlsm',
  'xlt',
  'xls',
  'pptx',
  'ppt',
  'pptm',
  'pps',
  'pot',
];

// Create a button to upload Office documents
const buttonUpload = document.createElement('button');
buttonUpload.textContent = 'Upload Office Document';
buttonUpload.onclick = async () => {
  fileUpload.click();
};

// Create a file input for uploading Office documents
// This input is hidden and will be triggered by the Upload button
const acceptedFormats = officeExtensions.map(ext => `.${ext}`).join(',');
const fileUpload = document.createElement('input');
fileUpload.style.display = 'none';
fileUpload.type = 'file';
fileUpload.accept = acceptedFormats;
fileUpload.onchange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = () => {
      theInstance.UI.loadDocument(reader.result, {filename: file.name});
    };
    reader.readAsArrayBuffer(file);
    // Update target PDF file name for download to match the uploaded Office document name
    targetFile = file.name.substring(0, file.name.lastIndexOf('.')) + '.pdf';
    buttonDownload.textContent = 'Download ' + targetFile;
  }
};

// Function to convert to PDF and download the resulting document
async function downloadPdf() {
  const doc =theInstance.Core.documentViewer.getDocument();

  const data = await doc.getFileData({
    downloadType: 'pdf',
  });
  const arr = new Uint8Array(data);
  const pdfBlob = new Blob([arr], { type: 'application/pdf' });

  const url = URL.createObjectURL(pdfBlob);
  const link = document.createElement('a');
  link.href = url;
  link.download = targetFile;
  link.click();
};

// Create a button to download the converted PDF
const buttonDownload = document.createElement('button');
buttonDownload.textContent = 'Download ' + targetFile;
buttonDownload.onclick = async () => {
  downloadPdf();
};

// Label for list of supported Office document formats
const labelFormats = document.createElement('label');
const formats = officeExtensions.map(ext => `${ext.toUpperCase()}`).join(', ');
labelFormats.textContent = `Office Formats: ${formats}`;

// UI section
//
// Helper code to add controls to the viewer holding the buttons and dropdown
// This code creates a container for the buttons and dropdown, styles them, and adds them to the viewer


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

buttonDownload.className = 'btn-style';
buttonUpload.className = 'btn-style';

labelFormats.className = 'formats-label';

controlsContainer.className = 'button-container';
controlsContainer.appendChild(labelFormats);
controlsContainer.appendChild(document.createElement('br'));
controlsContainer.appendChild(fileUpload);
controlsContainer.appendChild(buttonUpload);
controlsContainer.appendChild(buttonDownload);
element.insertBefore(controlsContainer, element.firstChild);

View the full sample on GitHub