Did you find this guide helpful?
Some test text!
Web / Guides / Open MS Office file
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 .
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 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.
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:
| 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. |
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 });
});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
Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales