" %}
Integrate WebViewer and enable Spreadsheet Editor in a Nuxt project
{% endembed %}
{% endtab %}
{% endtabs %}
## Prerequisites
Before you start:
* Install [Node.js](https://nodejs.org/en/download) and npm. We recommend using the latest active LTS release.
* Create a folder for your project.
* [Integrate WebViewer](/web/get-started/readme.md) into your project.
* Open a text editor like Visual Studio Code.
* Get your Apryse trial key.
{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}
## Enable Spreadsheet Editor
To enable the Spreadsheet Editor, set the `initialMode` parameter in the WebViewer constructor. Supported values are defined in the [Modes](https://sdk.apryse.com/api/web/global.html#Modes__anchor) enum. Omitting `initialDoc` will load an empty spreadsheet. The following example loads an existing spreadsheet.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer({
path: '/lib',
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
...,
}, document.getElementById('viewer')).then(instance => {
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
[WebViewerOptions](https://sdk.apryse.com/api/web/global.html#WebViewerOptions__anchor) [Modes](https://sdk.apryse.com/api/web/global.html#Modes)
This example shows how to implement the code in an HTML project with WebViewer and the Spreadsheet Editor enabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic WebViewer</title>
</head>
<body>
<!-- Add WebViewer container -->
<div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
<!-- Load WebViewer library -->
<script src="/lib/webviewer/webviewer.min.js"></script>
<script>
// Initialize WebViewer with Spreadsheet Editor enabled
WebViewer(
{
// Specify path to WebViewer 'lib' folder
path: '/lib/webviewer',
// Sign up to get a license key at https://dev.apryse.com
licenseKey: 'visitor.claims.wvKey || "YOUR_LICENSE_KEY"',
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
},
document.getElementById('viewer')
).then((instance) => {
const { documentViewer, annotationManager } = instance.Core;
// Call methods from instance, documentViewer, and annotationManager as needed
// Access additional namespaces as follows:
// const Tools = instance.Core.Tools;
// const Annotations = instance.Core.Annotations;
documentViewer.addEventListener('documentLoaded', () => {
// Call methods relating to the loaded document
});
});
</script>
</body>
</html>
By default, the Spreadsheet Editor opens in view mode. To start in edit mode, set the `initialEditMode` property within the [spreadsheetEditorOptions](https://sdk.apryse.com/api/web/global.html#WebViewerOptions__anchor) parameter in the WebViewer constructor.
The following example loads a spreadsheet in editing mode, allowing you to interact with and modify its contents.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer({
path: '/lib',
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
spreadsheetEditorOptions: {
initialEditMode: WebViewer.InitialEditModes.EDITING,
},
...,
}, document.getElementById('viewer')).then(instance => {
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
[WebViewerOptions](https://sdk.apryse.com/api/web/global.html#WebViewerOptions__anchor) [InitialEditModes](https://sdk.apryse.com/api/web/global.html#InitialEditModes__anchor)
## Load a spreadsheet
To load a spreadsheet using the Spreadsheet Editor, call the [UI.loadDocument()](https://sdk.apryse.com/api/web/UI.html#.loadDocument) method. If you're switching from the PDF viewer, include the `initialMode` option and set it to `WebViewer.Modes.SPREADSHEET_EDITOR`.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const filePath = 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx';
instance.UI.loadDocument(filePath, {
initialMode: WebViewer.Modes.SPREADSHEET_EDITOR
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
[UI.loadDocument()](https://sdk.apryse.com/api/web/UI.html?#.loadDocument__anchor)
You can also use the `enableOfficeEditing: true` property to load the Spreadsheet Editor. If you pass a file as a blob, make sure to include the extension option with the value `xlsx`. When you pass in a file path, it must have the `.xlsx` extension.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const filePath = 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx';
instance.Core.documentViewer.loadDocument(filePath, {
enableOfficeEditing: true,
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
[UI.loadDocument()](https://sdk.apryse.com/api/web/UI.html?#.loadDocument__anchor)
## Listen for editor-ready events
Before performing any programmatic actions, you must listen for the `spreadsheetEditorReady` event. For more, see [Events](/web/spreadsheet-editor/events.md#initialize-the-editor).
## Next steps
To explore additional document workflows and features, see:
* [Learn about Spreadsheet Editor](/web/spreadsheet-editor/spreadsheet-editor.md)
* [View spreadsheets](/web/spreadsheet-editor/view-mode.md)
* [Edit spreadsheets](/web/spreadsheet-editor/edit-mode.md)
* [Search and replace text in spreadsheets](/web/search/search-replace.md)
* [Demo Spreadsheet Editor](https://showcase.apryse.com/spreadsheet-editor?_gl=1*1pjwes1*_gcl_aw*R0NMLjE3NzI4MjgxODcuQ2owS0NRaUFrNnJOQmhDeEFSSXNBTjVtUUx1eXZQakl5OVJVaWxRUllFcm9EV2d1N0w5S1BfMnBxdU5ubW5Qck5HTWdfaFctM1JrVGdxc2FBbV9zRUFMd193Y0I.*_gcl_au*OTIwNjkxNDYyLjE3NzY3ODcyNTI.\&pk_vid=1d9ecff61586c6f61778598358ccf96a)
* [Explore Spreadsheet Editor capabilities](https://apryse.com/capabilities/spreadsheet-editor)
* [Build a React Spreadsheet Editor (blog)](https://apryse.com/blog/view-edit-spreadsheets-react-apryse-sdk)
---
# 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/spreadsheet-editor/basic-setup.md?ask=&goal=
```
`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.