将 ONLYOFFICE 文档编辑器与 Node.js 应用集成

news2024/10/6 18:23:14

我们来了解下，如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。

许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能，需要花费大量时间和精力。幸运的是，您可以使用 ONLYOFFICE——这是一款开源办公套件，可用于第三方应用，作为处理文档、电子表格和演示文稿编辑组件。

在本文中，我们会向您展示如何为任意 Node.js 应用添加文档编辑功能。我们会使用 ONLYOFFICE 平台上最简单的文档管理系统，向您展示具体操作方法。

ONLYOFFICE 能为您的应用带来什么

编辑文本文档、电子表格、演示文稿、PDF 等办公文档
支持 AI 集成，也提供两款现成的 AI 助手
与微软 Office 高度兼容
转换文档，支持 PDF 转 DOCX 等操作
多人实时协同编辑功能
丰富的宏和插件库，支持自行开发上传
自定义界面，白标产品

那么，我们开始行动吧。

安装 ONLYOFFICE 文档服务器

ONLYOFFICE 文档服务器包含几种编辑器。在将编辑器与您的应用集成之前，您要将编辑器部署到您的机器上。最简单的安装方法是使用 Docker：

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

文档服务器的地址为 0.0.0.0:8080。

授予文件访问权限

如要在您的应用中使用编辑器，您需要有打开和编辑文件的权限。

为演示如何访问这些文件，我们使用 express 框架开发的一个简单的 Node.js 应用。这个应用使用端口 3000。

在 GET 请求被发送至 http://localhost:3000/ 时，系统会返回文件 index.html。“文件”文件夹中包含公共文件，可在 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}!`));

如何打开文档进行查看

打开 index.html 文件，连接到文档服务器 API。您需要添加三个按钮——用于打开文本文档、电子表格和演示文稿。

编辑器会被在带有占位符 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>

完成上述操作后，点击其中一个按钮，即可在 ONLYOFFICE 中打开文件进行查看。

如何打开文件进行编辑

现在，您需要再添加三个用于编辑文件的按钮。然后，写一个新函数 open_to_edit()。它看起来很像 open_to_view() 函数，只是没有 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>

这样，您就可以打开文件进行编辑了。但这还不够，因为我们还想保存文件。我们来添加这个功能。

如何保存文件

现在，我们来编写最基本的回调处理程序，用于将文件保存到服务器。

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();

}
});

这就是将 ONLYOFFICE 编辑器与您的应用集成所需的最基本的操作了。您可以查看 ONLYOFFICE API 文档，了解更多信息。

ONLYOFFICE 编辑器几乎可以与所有编程语言编写的 web 应用集成。如要了解更多关于 .Net (C# MVC)、.Net (C#)、Java、PHP 和 Ruby 的集成示例，可在 GitHub 上查看。有关集成到 Python 应用的文章也很快会发布。

许可呢？

ONLYOFFICE 采用双许可模式。这意味着，只要遵从 GNU AGPL v.3 许可，就可以使用 GitHub 上的 ONLYOFFICE 开源解决方案。ONLYOFFICE 有许多成功的集成案例，包括与 ownCloud, Nextcloud, Moodle 和 eХo Platform 的集成。

如要将 ONLYOFFICE 编辑器作为 SaaS 或本地服务的一部分使用，您需要获得商业许可。在商用方面，ONLYOFFICE 也有诸多成功案例。例如，中国知网集成 ONLYOFFICE，让客户在 CNKI 系统中实现文件在线预览。或者，南京大学e-Science中心将 ONLYOFFICE文档集成到协同表格工具中，从而改进教师检查、评阅和打分学生作业的流程。