> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/ms-office/open-office.md).

# Open Excel, Word, and PPT Files with the JavaScript Viewer

Create, view, and manipulate Office documents using JavaScript with ease. Learn how to work with DOCX, XLSX, and PPTX files directly in your browser with WebViewer. The Apryse Web SDK streamlines secu

{% hint style="info" %}
**Requirements**

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

<a href="https://apryse.com/capabilities#OfficeConversion" class="button primary">Package: Office Conversion</a><a href="https://showcase.apryse.com/office-documents" class="button primary">Live demo</a>
{% endhint %}

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](https://docs.apryse.com) or [loadDocument](https://docs.apryse.com) function to open it.

If you are hoping to convert to a PDF without UI, refer to our [conversion guide](/web/ms-office/convert-office.md).

## WebViewer constructor

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

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

[WebViewer](https://sdk.apryse.com/api/web/global.html#WebViewer__anchor)

[Display & view documents using JavaScript](/web/get-started/guides/samples/viewing.md#viewing) 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.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[WebViewer](https://sdk.apryse.com/api/web/global.html#WebViewer__anchor) [WebViewerInstance.UI.loadDocument](https://sdk.apryse.com/api/web/UI.html#loadDocument__anchor)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[WebViewer](https://sdk.apryse.com/api/web/global.html#WebViewer__anchor) [WebViewerInstance.loadDocument](https://sdk.apryse.com/api/web/UI.html#.loadDocument)
{% endtab %}
{% endtabs %}

[Display & view documents using JavaScript](/web/get-started/guides/samples/viewing.md#viewing) 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](https://sdk.apryse.com/api/PDFTronSDK/cpp/classpdftron_1_1_p_d_f_1_1_office_to_p_d_f_options.html).

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.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}

<pre class="language-js" data-line-numbers><code class="lang-js">&#x3C;html>
  &#x3C;body>
    &#x3C;script src="../lib/core/webviewer-core.min.js">&#x3C;/script>
    &#x3C;script>
    (async function() {
      Core.setWorkerPath('../lib/core');
      const licenseKey = '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>';
      // Instantiate a Document object.
      const doc = await Core.createDocument('/path/to/file.docx', { l: licenseKey });
    })()
    &#x3C;/script>
  &#x3C;/body>
&#x3C;/html>
</code></pre>

[Core.setWorkerPath](https://sdk.apryse.com/api/web/Core.html#.setWorkerPath__anchor) [Core.createDocument](https://sdk.apryse.com/api/web/Core.html#.createDocument__anchor)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}

<pre class="language-js" data-line-numbers><code class="lang-js">&#x3C;html>
  &#x3C;body>
    &#x3C;script src="../lib/core/CoreControls.js">&#x3C;/script>
    &#x3C;script>
    (async function() {
      CoreControls.setWorkerPath('../lib/core');
      const licenseKey = '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>';
      // Instantiate a Document object.
      const doc = await CoreControls.createDocument('/path/to/file.docx', { l: licenseKey });
    })()
    &#x3C;/script>
  &#x3C;/body>
&#x3C;/html>
</code></pre>

[CoreControls.setWorkerPath](https://sdk.apryse.com/api/web/Core.html#.setWorkerPath__anchor) [CoreControls.createDocument](https://sdk.apryse.com/api/web/Core.html#.createDocument__anchor)
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}

<pre class="language-js" data-line-numbers><code class="lang-js">WebViewer(...)
  .then(async instance => {
    const licenseKey = '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>';
    // Instantiate a Document object.
    const doc = await instance.Core.createDocument('/path/to/file.docx', { l: licenseKey });
  });
</code></pre>

[WebViewer](https://sdk.apryse.com/api/web/global.html#WebViewer__anchor) [WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [Core](https://sdk.apryse.com/api/web/Core.html) [Core.createDocument](https://sdk.apryse.com/api/web/Core.html#.createDocument__anchor)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}

<pre class="language-js" data-line-numbers><code class="lang-js">WebViewer(...)
  .then(async instance => {
    const licenseKey = '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>';
    // Instantiate a Document object.
    const doc = await instance.CoreControls.createDocument('/path/to/file.docx', { l: licenseKey });
  });
</code></pre>

[WebViewer](https://sdk.apryse.com/api/web/global.html#WebViewer__anchor) [WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [CoreControls.createDocument](https://sdk.apryse.com/api/web/Core.html#.createDocument__anchor)
{% endtab %}
{% endtabs %}

## Related blogs

**Viewing DOCX Files** Angular: [How to View DOCX in an Angular Web App](https://apryse.com/blog/webviewer/how-to-view-docx-in-angular-v2)- 10/15/2024 Vue: [How to Open DOCX in a Vue Web App](https://apryse.com/blog/webviewer/how-to-open-docx-in-vue) - 7/11/2023

**Viewing XLSX Docs** React: [How to View XLSX Documents in a React Web App](https://apryse.com/blog/webviewer/how-view-xlsx-documents-in-a-react-app) - 7/11/2022 Angular: [How to View XLSX Documents in a Angular Web App](https://apryse.com/blog/webviewer/how-view-xlsx-documents-in-an-angular-viewer) - 7/25/2022 Vue: [How to View XLSX Documents in a Vue Web App](https://apryse.com/blog/webviewer/how-view-xlsx-documents-in-vue) - 7/27/2022


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/ms-office/open-office.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.