将 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 openconst url = window.location.protocol + "//" +window.location.hostname + ':' + window.location.port + '/' + filename;// Create DocsAPI object and open the editorthis.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. Detailsres.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文档集成到协同表格工具中,从而改进教师检查、评阅和打分学生作业的流程。
相关文章
开发者版 ONLYOFFICE 文档 7.5:API 和文档生成器更新
将 ONLYOFFICE 文档编辑器与 С# 群件平台集成
使用 Ruby 语言来解析开放文档格式 OOXML 文件
如何将 ONLYOFFICE 协作空间与单页面应用集成
如何采用WOPI协议将Office整合到自己项目中
相关文章:
将 ONLYOFFICE 文档编辑器与 Node.js 应用集成
我们来了解下,如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。 许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能,需要花费大量时间和精力。幸运的是,您可以使用 ONLYOFFICE——这是一款开源办公套件,可…...
CentOS 7搭建Gitlab流程
目录 1、查询docker镜像gitlab-ce 2、拉取镜像 3、查询已下载的镜像 4、新建gitlab文件夹 5、在gitlab文件夹下新建相关文件夹 6、创建运行gitlab的容器 7、查看docker容器 8、根据Linux地址访问gitlab 9、进入docker容器,设置用户名的和密码 10、登录git…...
Idea安装完成配置
目录: 环境配置Java配置Maven配置Git配置 基础设置编码级设置File Header自动生成序列化编号配置 插件安装MyBtisPlusRestfulTooklkit-fix 环境配置 Java配置 Idea右上方,找到Project Settings. 有些版本直接有,有些是在设置下的二级菜单下…...
超详细~25考研规划~感恩现在努力的你!!!
25考研规划 俄语,翻译过来叫我爱你 考试时间 第一天 8.30-11.30政治——100分 2.00-5.00英语——100分 第二天 8.30-11.30数学——150分 2.00-5.00专业课——150分 1.什么是25考研 将在2024年12月参加考研,2025年本科毕业,9月读研究…...
智慧城市安全监控的新利器
在传统的城市管理中,井盖的监控一直是一个难题,而井盖异动传感器的出现为这一问题提供了有效的解决方案。它具有体积小、重量轻、安装方便等特点,可以灵活地应用于各种类型的井盖,实现对城市基础设施的全方位监控。 智能井盖监测终…...
【算法】石子合并(区间dp)
题目 设有 N 堆石子排成一排,其编号为 1,2,3,…,N。 每堆石子有一定的质量,可以用一个整数来描述,现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆,合并的代价为这两堆石子的质量之和,合并后与这两堆石子…...
C++-特殊类和单例模式
1.请设计一个类,不能被拷贝 拷贝构造函数以及赋值运算符重载,因此想要让一个类禁止拷贝,只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 //该类不能发生拷贝class NonCopy{public:NonCopy(const NonCopy& Nc) delete;NonCopy&…...
【开源】基于Vue.js的智能教学资源库系统
项目编号: S 050 ,文末获取源码。 \color{red}{项目编号:S050,文末获取源码。} 项目编号:S050,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课…...
C语言之qsort()函数的模拟实现
C语言之qsort()函数的模拟实现 文章目录 C语言之qsort()函数的模拟实现1. 简介2. 冒泡排序3. 对冒泡排序进行改造4. 改造部分4.1 保留部分的冒泡排序4.2 比较部分4.3 交换部分 5. bubble_sort2完整代码6. 使用bubble_sort2来排序整型数组7. 使用bubble_sort2来排序结构体数组7.…...
数字化未来:实时云渲染在智慧城市中的创新应用
数字中国战略"是国家推动数字经济发展的战略框架。这个战略旨在加速数字化转型,推动信息技术在各个领域的应用,提高社会经济效益和人民生活质量。而智慧城市作为其中的重要一环,重要性不言而喻。 智慧城市是当今城市发展的热点和趋势&a…...
Go语言常用命令详解(二)
文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令,这些命令可以帮助您在Go开发中进行编译、测试、运行和…...
ChatGPT 从零到一打造私人智能英语学习助手
近几年,随着智能化技术的发展和人工智能的兴起,越来越多的应用程序开始涌现出来。在这些应用中,语音识别、自然语言处理以及机器翻译等技术都得到了广泛的应用。其中,聊天机器人成为了最受欢迎的人工智能应用之一,它们…...
算法升级之路(七)-盛最多水的容器
给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 原题链接: 盛最多水的容器 解题思路&…...
milvus数据库索引管理
一、建立向量索引 默认情况下,Milvus不会对小于1,024行的段进行索引。 1.准备索引参数 index_params {"metric_type":"L2","index_type":"IVF_FLAT","params":{"nlist":1024} } #"nlist"…...
JVM中的 -Xms参数 设置 JVM 的初始堆大小
在 Java 虚拟机(JVM)的配置中,-Xms 是一个启动参数,用于设置 JVM 的初始堆大小(Initial Heap Size)。这个参数对于优化 Java 应用程序的性能非常重要,特别是在处理需要大量内存的应用程序时。 …...
Idea 创建 Spring 项目(保姆级)
描述信息 最近卷起来,系统学习Spring;俗话说:万事开头难;创建一个Spring项目在网上找了好久没有找到好的方式;摸索了半天产出如下文档。 在 Idea 中新建项目 填写信息如下 生成项目目录结构 pom添加依赖 <depende…...
C++多线程学习(一):C++11 多线程快速入门
参考引用 C11 14 17 20 多线程从原理到线程池实战代码运行环境:Visual Studio 2019 1. 为什么要用多线程 任务分解 耗时的操作,任务分解,实时响应 数据分解 充分利用多核CPU处理数据 数据流分解 读写分离,解耦合设计 2. 第一个…...
Linux系统之lsof命令的基本使用
Linux系统之lsof命令的基本使用 一、lsof命令的基本使用二、lsof命令的使用帮助2.1 lsof命令的help帮助信息2.2 lsof命令帮助解释 三、lsof的基本使用3.1 直接使用lsof命令3.2 查看某个进程打开的所有文件3.3 查看某个用户打开的所有文件3.4 查看某个文件被哪些进程打开3.5 查看…...
性能压力测试的优势与重要性
性能压力测试是软件开发过程中至关重要的一环,它通过模拟系统在极限条件下的运行,以评估系统在正常和异常负载下的表现。这种测试为确保软件系统的可靠性、稳定性和可伸缩性提供了关键信息。下面将探讨性能压力测试的优势以及为什么在软件开发中它具有不…...
AtCoder Beginner Contest 329 题解A~F
A - Spread 输入字符串,字符之间加上空格输出 B - Next 输出数组当中第二大的数 C - Count xxx 统计每个字符出现过的最长长度,再累加即可 #include<bits/stdc.h> #pragma GCC optimize("Ofast") #define INF 0x3f3f3f3f #define I…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
TMC2226超静音步进电机驱动控制模块
目前已经使用TMC2226量产超过20K,发现在静音方面做的还是很不错。 一、TMC2226管脚定义说明 二、原理图及下载地址 一、TMC2226管脚定义说明 引脚编号类型功能OB11电机线圈 B 输出 1BRB2线圈 B 的检测电阻连接端。将检测电阻靠近该引脚连接到地。使用内部检测电阻时,将此引…...
android 之 KeyguardService
一、功能定位与核心作用 KeyguardService 是 Android 锁屏功能的核心服务,负责管理设备锁屏界面(如密码、图案、指纹等验证流程),并协调系统安全策略与用户交互。主要职责包括: 锁屏状态管理 控制锁屏界面的显示/隐藏…...
