DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • The Best Node.js IDEs in the Market Right Now
  • Building a Voice-Powered Smart Kitchen App Using LLaMA 3.1, Firebase, and Node.js
  • How To Compare DOCX Documents in Java
  • Exploring Google's Open Images V7

Trending

  • Next-Gen IoT Performance Depends on Advanced Power Management ICs
  • Building Resilient Networks: Limiting the Risk and Scope of Cyber Attacks
  • Optimizing Software Performance for High-Impact Asset Management Systems
  • Assessing Bias in AI Chatbot Responses
  1. DZone
  2. Coding
  3. JavaScript
  4. Integrating ONLYOFFICE Document Editors With Your Node.js App

Integrating ONLYOFFICE Document Editors With Your Node.js App

Look at how to integrate ONLYOFFICE document editors with your web application.

By 
Nadya Knyazeva user avatar
Nadya Knyazeva
·
Nov. 29, 18 · Tutorial
Likes (6)
Comment
Save
Tweet
Share
19.3K Views

Join the DZone community and get the full member experience.

Join For Free

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.

app OnlyOffice Document Node.js Open source

Opinions expressed by DZone contributors are their own.

Related

  • The Best Node.js IDEs in the Market Right Now
  • Building a Voice-Powered Smart Kitchen App Using LLaMA 3.1, Firebase, and Node.js
  • How To Compare DOCX Documents in Java
  • Exploring Google's Open Images V7

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!