Some test text!

Search
Hamburger Icon

Web / Guides / Open MS Office file

View DOCX, XLSX & PPTX documents using JavaScript

View DOCX, XLSX, PPTX in a browser without any server-side dependencies. WebViewer allows viewing of MS Office files similar to PDF, images and other formats.

If you have a URL for a document, you can pass it to the WebViewer constructor or loadDocument function to open it.

If you are hoping to convert to a PDF without UI, refer to our conversion guide .

WebViewer constructor

Load the office document with the WebViewer constructor and it will load with the Viewer.

WebViewer({
  ...,
  initialDoc: 'https://myserver.com/myfile.docx',
}, document.getElementById('viewer'));

Display & view documents using JavaScript
Full sample code shows how to call WebViewer constructor to instantiate and load document. You can load local/remote files of your choice.

Load document

Load the office document with the load document method after WebViewer is initalized.

WebViewer(...)
  .then(instance => {
    instance.UI.loadDocument('https://myserver.com/myfile.docx', { filename: 'myfile.docx' });
  });

Display & view documents using JavaScript
Full sample code shows how to call WebViewer constructor to instantiate and load document. You can load local/remote files of your choice.

Load document options

Starting version 8, Office documents can be loaded with Office conversion options.

WebViewer(...)
  .then(instance => {
      const opts = { ExcelMaxAllowedCellCount: 250000 };
      const doc = await instance.Core.createDocument(file, { officeOptions : { officeToPDFOptions: opts }});
    instance.UI.loadDocument('https://myserver.com/myfile.xslx', { filename: 'myfile.xslx' });
  });

Available conversion options:

OptionDescription
ApplyPageBreaksToSheetWhether we should split Excel workheets into pages so that the output resembles print output. Defaults to false.
DisplayChangeTrackingIf this option is true, will display office change tracking markup present in the document (i.e, red strikethrough of deleted content and underlining of new content). Otherwise displays the resolved document content, with no markup. Defaults to true.
ExcelDefaultCellBorderWidthCell border width for table cells that would normally be drawn with no border. In units of points. Can be used to achieve a similar effect to the "show gridlines" display option within Microsoft Excel.
ExcelMaxAllowedCellCountConversion will throw an exception if the number of cells in a Microsoft Excel document is above the set MaxAllowedCellCount. Used for early termination of resource intensive conversions. Setting this value to 250000 will allow the vast majority of Excel documents to convert without issue, while keeping RAM usage to a reasonable level. By default there is no limit to the number of allowed cells.
LayoutResourcesPluginPathThe path at which the pdftron-provided font resource plugin resides.
LocaleISO 639-1 code of the current system locale. For example: 'en-US', 'ar-SA', 'de-DE', etc.
ResourceDocPathThe path at which a .docx resource document resides.
SmartSubstitutionPluginPathThe path at which the pdftron-provided font resource plugin resides.

Advanced office loading

Creating an Office document is similar to creating a PDF document except the Office worker needs to be initialized.

<html>
  <body>
    <script src="../lib/core/webviewer-core.min.js"></script>
    <script>
    (async function() {
      Core.setWorkerPath('../lib/core');

      const licenseKey = 'Insert commercial license key here after purchase';

      // Instantiate a Document object.
      const doc = await Core.createDocument('/path/to/file.docx', { l: licenseKey });
    })()
    </script>
  </body>
</html>

Alternatively, Core is available with the WebViewer instance as well. Note that in version < 8, it is called CoreControls.

WebViewer(...)
  .then(async instance => {
    const licenseKey = 'Insert commercial license key here after purchase';

    // Instantiate a Document object.
    const doc = await instance.Core.createDocument('/path/to/file.docx', { l: licenseKey });
  });

Related blogs

Viewing DOCX Files
Angular: How to View DOCX in an Angular Web App- 7/13/2022
Vue: How to Open DOCX in a Vue Web App - 7/11/2023

Viewing XLSX Files
React: How to View XLSX Documents in a React Web App - 7/11/2022
Angular: How to View XLSX Documents in a Angular Web App - 7/25/2022
Vue: How to View XLSX Documents in a Vue Web App - 7/27/2022

Get the answers you need: Chat with us