ONLYOFFICE Docs working in a single-page-application (SPA)
ONLYOFFICE Docs is a powerful and versatile solution for your project. It can be easily integrated into a single-page application for demonstrative purposes. This blog post will show you how to integrate ONLYOFFICE Docs into your SPA.
Prerequisites
Before we begin, let’s make sure that we have all the necessary components ready. Successful integration will require:
- Running ONLYOFFICE Docs server.
- A server that can serve documents to our SPA.
- The single-page application where we intend to use ONLYOFFICE Docs.
For this project, we will install and run ONLYOFFICE Docs as a Docker container. It is the easiest and fastest installation option. However, there are other installation alternatives available.
Setting up the SPA index page
Now we need to set up our SPA. We will be displaying documents, spreadsheets, and presentations on the same page. To do that, we will embed them into a placeholder div and display the requested editor upon clicking the corresponding button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
<title>ONLYOFFICE Api Documentation</title>
</head>
<body>
<header>
<a href="/"><img src="Images/logo.png" alt="ONLYOFFICE" /></a>
</header>
<h1>ONLYOFFICE Docs can be easily integrated into your web page!<br>Let`s see how it works!</h1></h1>
<div class="center">
<button type="button" id="docx" class="buttons">DOCX</button>
<button type="button" id="xlsx" class="buttons">XLSX</button>
<button type="button" id="pptx" class="buttons">PPTX</button>
</div>
<div class = editors>
<div id="placeholder"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Note! In the header section, we connected our SPA to Document Server API methods. Where https://documentserver/ is the name of the server with the ONLYOFFICE Document Server installed.
Configuring the SPA
Then we create a JavaScript file where we will be configuring documents displayed in the SPA.
Here’s the configuration of the document editor:
window.docEditor = new DocsAPI.DocEditor("placeholder",
{
"document": {
"fileType": "docx",
"key": "W8FAFC9C22A8",
"title": "Example Document Title.",
"url": "https://example.com/url-to-example-document.docx"
},
"documentType": "word",
"height": "100%",
"width": "100%"
});
In the document section, we specify the fileType, key, title, and url parameters:
- The fileType parameter specifies the type of the document.
- The key parameter defines the unique identifier used by the service to recognize the document.
- The title parameter specifies the name of the document which will also be used as a file name when the document is downloaded.
- The url parameter defines an absolute URL where the source document is stored.
In the basic section, we configure the documentType, height, and width:
- The documentType parameter defines the document type to be opened.
The word specification is used for opening text documents.
The cell specification corresponds to spreadsheets.
The slide specification is applied to presentations.
- The height/width parameters define the document height and width in the browser window.
The spreadsheet and presentation editors are initialized accordingly:
Spreadsheet editor:
window.docEditor = new DocsAPI.DocEditor("placeholder",
{
"document": {
"fileType": "xlsx",
"key": "W5FAFC9C22A8",
"title": "Example Document Title.",
"url": "https://example.com/url-to-example-document.xlsx"
},
"documentType": "cell",
"height": "100%",
"width": "100%"
});
Presentation editor:
window.docEditor = new DocsAPI.DocEditor("placeholder",
{
"document": {
"fileType": "pptx",
"key": "W7FAFC9C21A8",
"title": "Example Document Title.",
"url": "https://example.com/url-to-example-document.pptx"
},
"documentType": "slide",
"height": "100%",
"width": "100%"
});
}
}
Our configuration contains only the basic and document sections. It is the bare bones needed to display the editors. However, the editorConfig section can also be included. This section allows changing editor interface parameters: opening mode, interface language, additional buttons, etc. Learn more about different sections and additional parameters on our API documentation page.
Note! The editorConfig section includes the callbackUrl parameter which specifies the absolute URL to the document storage service. The callback handler should be implemented by the software integrators on their server. Otherwise, the document saving will not be accessible.
Our editors will be displayed in a single div. Every time we click a corresponding button the requested editor will be initialized and loaded. To achieve that, we need to modify our code:
var openEdit = function(type) {
if (typeof docEditor != "undefined") {
docEditor.destroyEditor();
}
if (type == "docx") {
window.docEditor = new DocsAPI.DocEditor("placeholder",
{
"document": {
"fileType": "docx",
"key": "W8FAFC9C22A8",
"title": "Example Document Title.",
"url": "https://example.com/url-to-example-document.docx"
},
"documentType": "word",
"height": "100%",
"width": "100%"
});
} else if (type == "xlsx") {
window.docEditor = new DocsAPI.DocEditor("placeholder",
{
"document": {
"fileType": "xlsx",
"key": "W5FAFC9C22A8",
"title": "Example Document Title.",
"url": "https://example.com/url-to-example-document.xlsx"
},
"documentType": "cell",
"height": "100%",
"width": "100%"
});
} else if (type == "pptx") {
window.docEditor = new DocsAPI.DocEditor("placeholder",
{
"document": {
"fileType": "pptx",
"key": "W7FAFC9C21A8",
"title": "Example Document Title.",
"url": "https://example.com/url-to-example-document.pptx"
},
"documentType": "slide",
"height": "100%",
"width": "100%"
});
}
}
var docx = document.getElementById("docx");
var xlsx = document.getElementById("xlsx");
var pptx = document.getElementById("pptx");
docx.onclick = function() {
openEdit("docx")
};
xlsx.onclick = function() {
openEdit("xlsx")
};
pptx.onclick = function() {
openEdit("pptx")
};
First, we added the destroyEditor method. This method is called to reinitialize the document editor with another configuration. Every time we select a different editor, this method is executed to stop the current editor from displaying in the div.
Then we wrapped each of the editor configurations in an if statement. That allows us to initialize each particular editor by passing “docx”, “xlsx” and “pptx” into the function parameters.
After that, we targeted the button elements and hooked them up to the onclick event with the parameters corresponding to the document, spreadsheet, and presentation editors.
Now let’s open our SPA and see how it works!
ONLYOFFICE Docs is a powerful yet flexible tool that can be easily integrated into your web application and extend the functionality of your SPA. You can learn more about ONLYOFFICE Docs in the developers’ section of our API Documentation.
Soon we are planning to release React, Angular, and Vue wrappers that might be very convenient and time-saving solutions for your development. Stay tuned for the updates to utilize this feature. Also, feel free to ask questions or share your ideas with us. We are always open to discussion and cooperation. Best of luck in your exploratory endeavors!
