Section:

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

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

Related Links

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.

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

Related Links

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 (v8.0+)

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

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.

1<html>
2  <body>
3    <script src="../lib/core/webviewer-core.min.js"></script>
4    <script>
5    (async function() {
6      Core.setWorkerPath('../lib/core');
7      const licenseKey = 'Insert commercial license key here after purchase';
8      // Instantiate a Document object.
9      const doc = await Core.createDocument('/path/to/file.docx', { l: licenseKey });
10    })()
11    </script>
12  </body>
13</html>

Related Links

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

1WebViewer(...)
2  .then(async instance => {
3    const licenseKey = 'Insert commercial license key here after purchase';
4    // Instantiate a Document object.
5    const doc = await instance.Core.createDocument('/path/to/file.docx', { l: licenseKey });
6  });

Related Links

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales