> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/samples/showcase-demo-office-to-pdf.md). # Office to PDF - Showcase 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 {% hint style="info" %} **Requirements** *These packages are required to use these features in production. Trial keys have unlimited access to all features* Web SDKPackage: Office ConversionLive demo {% endhint %} 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](https://showcase.apryse.com/office-to-pdf), 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](/web/get-started/readme.md) 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. {% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="compact" %} 
// 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 = 'visitor.claims.wvKey || "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](https://github.com/ApryseSDK/webviewer-samples/tree/main/showcase-demos-playground) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.apryse.com/web/get-started/samples/showcase-demo-office-to-pdf.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.