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

我们来了解下,如何将 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, MoodleeХo Platform 的集成。

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

相关文章

开发者版 ONLYOFFICE 文档 7.5:API 和文档生成器更新

将 ONLYOFFICE 文档编辑器与 С# 群件平台集成

使用 Ruby 语言来解析开放文档格式 OOXML 文件

如何将 ONLYOFFICE 协作空间与单页面应用集成​​​​​​

如何采用WOPI协议将Office整合到自己项目中

相关推荐
知识分享小能手19 分钟前
JavaScript学习教程,从入门到精通,Ajax与Node.js Web服务器开发全面指南(24)
开发语言·前端·javascript·学习·ajax·node.js·html5
dwqqw2 小时前
opencv图像库编程
前端·webpack·node.js
layman05284 小时前
node.js 实战——(fs模块 知识点学习)
javascript·node.js
jayson.h4 小时前
VScode
ide·vscode·编辑器
本本啊4 小时前
node 启动本地应用程序并设置窗口大小和屏幕显示位置
前端·node.js
EQ-雪梨蛋花汤5 小时前
【Unity笔记】Unity音效管理:ScriptableObject配置 + 音量控制 + 编辑器预览播放自动化实现
笔记·unity·编辑器
全栈派森6 小时前
Next15 + Prisma + Auth5 实战讲解
react.js·node.js·next.js
·薯条大王6 小时前
Node.js 开发用户登录功能(使用mysql实现)
数据库·mysql·node.js
新时代农民工--小明6 小时前
从0开始搭建一套工具函数库,发布npm,支持commonjs模块es模块和script引入使用
前端·javascript·typescript·npm·node.js
dustcell.7 小时前
vim 命令复习
linux·编辑器·vim