Creating Office 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.

JavaScript

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

WebViewer

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.

JavaScript (SDK v8.0+)

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

WebViewer WebViewerInstance.UI.loadDocument

JavaScript (SDK v6.0+)

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

WebViewer WebViewerInstance.loadDocument

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.

JavaScript

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:

Option	Description
ApplyPageBreaksToSheet	Whether we should split Excel workheets into pages so that the output resembles print output. Defaults to false.
DisplayChangeTracking	If 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.
ExcelDefaultCellBorderWidth	Cell 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.
ExcelMaxAllowedCellCount	Conversion 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.
LayoutResourcesPluginPath	The path at which the pdftron-provided font resource plugin resides.
Locale	ISO 639-1 code of the current system locale. For example: 'en-US', 'ar-SA', 'de-DE', etc.
ResourceDocPath	The path at which a .docx resource document resides.
SmartSubstitutionPluginPath	The 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.

JavaScript (SDK v8.0+)

<html>
  <body>
    <script src="../lib/core/webviewer-core.min.js"></script>
    <script>
    (async function() {
      Core.setWorkerPath('../lib/core');
      const licenseKey = 'YOUR_LICENSE_KEY';
      // Instantiate a Document object.
      const doc = await Core.createDocument('/path/to/file.docx', { l: licenseKey });
    })()
    </script>
  </body>
</html>

Core.setWorkerPath Core.createDocument

JavaScript (SDK v6.0+)

<html>
  <body>
    <script src="../lib/core/CoreControls.js"></script>
    <script>
    (async function() {
      CoreControls.setWorkerPath('../lib/core');
      const licenseKey = 'YOUR_LICENSE_KEY';
      // Instantiate a Document object.
      const doc = await CoreControls.createDocument('/path/to/file.docx', { l: licenseKey });
    })()
    </script>
  </body>
</html>

CoreControls.setWorkerPath CoreControls.createDocument

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

JavaScript (SDK v8.0+)

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

WebViewer WebViewerInstance Core Core.createDocument

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(async instance => {
    const licenseKey = 'YOUR_LICENSE_KEY';
    // Instantiate a Document object.
    const doc = await instance.CoreControls.createDocument('/path/to/file.docx', { l: licenseKey });
  });

WebViewer WebViewerInstance CoreControls.createDocument

Related blogs

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

Viewing XLSX Docs 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