将 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整合到自己项目中

相关推荐
『六哥』2 小时前
Windows 10 如何设置右击鼠标快速进行“关机”
windows·经验分享·编辑器
Misnearch3 小时前
node.js版本管理
node.js
转转技术团队3 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia3 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
你的人类朋友8 小时前
解释一下Node.js的『阻塞』现象,并回答:为什么会阻塞?什么情况下会阻塞?
javascript·后端·node.js
jinan8869 小时前
企业的移动终端安全怎么管理?
大数据·网络·安全·数据分析·开源软件
1alisa18 小时前
Sublime Text for Mac v4【注册汉化版】代码编辑器
macos·编辑器·sublime text
神码编程19 小时前
【Unity】 HTFramework框架(六十四)SaveDataRuntime运行时保存组件参数、预制体
unity·编辑器·游戏引擎
mzak21 小时前
vscode集成deepseek实现辅助编程(银河麒麟系统)【详细自用版】
linux·vscode·编辑器·银河麒麟·deepseek
一个程序员(●—●)1 天前
编辑器检视器面板深度扩展2+编辑器菜单栏扩展
编辑器