Viewing Office Docs with WebViewer

Requirements

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

Package: Office ConversionLive demo

This JavaScript sample lets you display and view a PDF, DOCX, XLSX or PPTX document in our WebViewer (no servers or other external dependencies required). It shows you how to call the WebViewer constructor to instantiate and load a document. You can load local/remote files of your choice. This sample works on all browsers (including IE11) and mobile devices without using plug-ins.

Learn more about our Web SDK.

JavaScript

// eslint-disable-next-line no-undef
const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;

WebViewerConstructor(
  {
    path: '../../../lib',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);

  document.getElementById('select').onchange = e => {
    instance.UI.loadDocument(e.target.value);
  };

  document.getElementById('file-picker').onchange = e => {
    const file = e.target.files[0];
    if (file) {
      instance.UI.loadDocument(file);
    }
  };

  document.getElementById('url-form').onsubmit = e => {
    e.preventDefault();
    instance.UI.loadDocument(document.getElementById('url').value);
  };
});