Integrating ONLYOFFICE Document Editors With Your Node.js App

Many web apps would benefit from document editing. However, it takes a lot of time an effort to create that functionality from scratch. Fortunately, you can use ONLYOFFICE, an open source office suite that can be used as a document, spreadsheet, and presentation editing component for third-party apps.

In this article, we will show you how to add doc editing to any app on Node.js. To show you how it is done, we will use the simplest document management system on this platform.

What ONLYOFFICE Will Bring to Your App

• docx, xlsx, pptx editing,
• the highest compatibility with MS Office,
• viewing and saving to PDF,
• working with OpenDocument and other popular office formats (they are converted to docx, xlsx, or pptx to be edited),
• powerful formatting and styling tools,
• real-time co-editing,
• enhancements via plugins and macros,
• protecting documents with end-to-end encryption.

So, let’s do it.

Install ONLYOFFICE Document Server

ONLYOFFICE Document Server contains the editors. Before you integrate the editors with your application, you should deploy them on your machine. The easiest way to install to do it is to use Docker:

docker run -itd -p 8080:80 onlyoffice/documentserver 

Document Server will be available at 0.0.0.0:8080.

Grant Access to Your Files

To use the editors within your app, you’ll need access to files you want to open and edit.

To show how to get to them, we will use a simple app on Node.js with the express framework. The app will use port 3000.

When the GET request is sent to http://localhost:3000/, the fileindex.html is returned. The Files folder contains public files that will be available at http://localhost:3000/filename .

const express = require('express');

const path = require('path');

const app = express();

app.use(express.static('files'));

app.get('/', (req, res) => {

res.sendFile(path.join(__dirname + '/index.html'))

});

app.listen(3000 , () => console.log(`Example app listening on port ${port}!`));

How to Open a Doc for Viewing

Open the index.html file and connect to the Document Server API. You need to add three buttons — for opening text documents, spreadsheets, and presentations.

The editors will be opened in the element with the placeholder ID.

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script>

<button onclick="open_to_view('1.docx', 'text')">1.docx view</button>

<button onclick="open_to_view('1.xlsx', 'spreadsheet')">1.xlsx view</button>

<button onclick="open_to_view('1.pptx', 'presentation')">1.pptx view</button>

<div id="placeholder"></div>

<script>

function open_to_view(filename, documentType) {

// Close the editors if they are open.

if (this.docEditor) {
this.docEditor.destroyEditor()
}

// Add the link to the file you want to open

const url = window.location.protocol + "//" +
 window.location.hostname + ':' + window.location.port + '/' + filename;

// Create DocsAPI object and open the editor

this.docEditor = new DocsAPI.DocEditor("placeholder",

{

documentType: documentType,

document: { url: url },

editorConfig: { mode: "view" }

});

}

</script>

After you do this, clicking one of the buttons will open files for viewing in ONLYOFFICE.

How to Open a File for Editing

Now you need to add three buttons more for editing files. Then, write a new function open_to_edit(). It will look much like the open_to_view() function but without the editorConfig .

<button onclick="open_to_edit('1.docx', 'text')">1.docx view</button>

<button onclick="open_to_edit('1.xlsx', 'spreadsheet')">1.xlsx view</button>

<button onclick="open_to_edit('1.pptx', 'presentation')">1.pptx view</button>

<script>

function open_to_edit(filename, documentType) {

if (this.docEditor) {
this.docEditor.destroyEditor()
}

const url = window.location.protocol + "//" +
window.location.hostname + ':' + window.location.port + '/' + filename;

this.docEditor = new DocsAPI.DocEditor("placeholder", {

documentType: documentType,

document: { url: url }

});

}

</script>

After that, you will be able to open files for editing. But that’s not enough because we also want to save files. Let’s add this, shall we?

How to Save Files

Now we will write the minimum callback handler for saving files to your server.

app.post("/track", function (req, res) {

// status 2 means that the files is ready for saving.
// More information about statuses can be found in our API documentation
if (req.body.status === 2) {

const file = syncRequest("GET", req.body.url);

fs.writeFileSync(__dirname + '/files/' + req.query.fileName, file.getBody());

// {"error": 0} you need to get this response from your storage,
        //it means no errors occurred. Details

res.write("{\"error\":0}");

res.end();

// do not do anything about other responses

} else {

res.write("{\"error\":0}");

res.end();

}
});

This is the minimum that has to be done to integrate ONLYOFFICE editors with your application. Check out ONLYOFFICE API documentation to learn more.

ONLYOFFICE editors can be integrated with web apps written almost in any programming language. More integration examples on .Net (C# MVC), .Net (C#), Java, PHP, and Ruby.can be found on GitHub. And an article on integration into a Python app is coming soon.

What About the License?

ONLYOFFICE comes with a dual-license model. This means that as long as you respect the GNU AGPL v.3 license, you can use the ONLYOFFICE open source solution available on GitHub. There are a lot of successful integrations — with ownCloud, Nextcloud, Moodle, and eХo Platform.

To deliver ONLYOFFICE editors as a part of your SaaS or on-premise service, a commercial license is required. There are many good examples of commercial usage, too. For instance, PowerFolder, a German provider of public, private, and hybrid cloud solutions, used ONLYOFFICE to bring online document editing to their users.