当前位置: 首页 > news >正文

将 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#)JavaPHP  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 应用集成

我们来了解下&#xff0c;如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。 许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能&#xff0c;需要花费大量时间和精力。幸运的是&#xff0c;您可以使用 ONLYOFFICE——这是一款开源办公套件&#xff0c;可…...

CentOS 7搭建Gitlab流程

目录 1、查询docker镜像gitlab-ce 2、拉取镜像 3、查询已下载的镜像 4、新建gitlab文件夹 5、在gitlab文件夹下新建相关文件夹 6、创建运行gitlab的容器 7、查看docker容器 8、根据Linux地址访问gitlab 9、进入docker容器&#xff0c;设置用户名的和密码 10、登录git…...

Idea安装完成配置

目录&#xff1a; 环境配置Java配置Maven配置Git配置 基础设置编码级设置File Header自动生成序列化编号配置 插件安装MyBtisPlusRestfulTooklkit-fix 环境配置 Java配置 Idea右上方&#xff0c;找到Project Settings. 有些版本直接有&#xff0c;有些是在设置下的二级菜单下…...

超详细~25考研规划~感恩现在努力的你!!!

25考研规划 俄语&#xff0c;翻译过来叫我爱你 考试时间 第一天 8.30-11.30政治——100分 2.00-5.00英语——100分 第二天 8.30-11.30数学——150分 2.00-5.00专业课——150分 1.什么是25考研 将在2024年12月参加考研&#xff0c;2025年本科毕业&#xff0c;9月读研究…...

智慧城市安全监控的新利器

在传统的城市管理中&#xff0c;井盖的监控一直是一个难题&#xff0c;而井盖异动传感器的出现为这一问题提供了有效的解决方案。它具有体积小、重量轻、安装方便等特点&#xff0c;可以灵活地应用于各种类型的井盖&#xff0c;实现对城市基础设施的全方位监控。 智能井盖监测终…...

【算法】石子合并(区间dp)

题目 设有 N 堆石子排成一排&#xff0c;其编号为 1,2,3,…,N。 每堆石子有一定的质量&#xff0c;可以用一个整数来描述&#xff0c;现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆&#xff0c;合并的代价为这两堆石子的质量之和&#xff0c;合并后与这两堆石子…...

C++-特殊类和单例模式

1.请设计一个类&#xff0c;不能被拷贝 拷贝构造函数以及赋值运算符重载&#xff0c;因此想要让一个类禁止拷贝&#xff0c;只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 //该类不能发生拷贝class NonCopy{public:NonCopy(const NonCopy& Nc) delete;NonCopy&…...

【开源】基于Vue.js的智能教学资源库系统

项目编号&#xff1a; S 050 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S050&#xff0c;文末获取源码。} 项目编号&#xff1a;S050&#xff0c;文末获取源码。 目录 一、摘要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.…...

数字化未来:实时云渲染在智慧城市中的创新应用

数字中国战略"是国家推动数字经济发展的战略框架。这个战略旨在加速数字化转型&#xff0c;推动信息技术在各个领域的应用&#xff0c;提高社会经济效益和人民生活质量。而智慧城市作为其中的重要一环&#xff0c;重要性不言而喻。 智慧城市是当今城市发展的热点和趋势&a…...

Go语言常用命令详解(二)

文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令&#xff0c;这些命令可以帮助您在Go开发中进行编译、测试、运行和…...

ChatGPT 从零到一打造私人智能英语学习助手

近几年&#xff0c;随着智能化技术的发展和人工智能的兴起&#xff0c;越来越多的应用程序开始涌现出来。在这些应用中&#xff0c;语音识别、自然语言处理以及机器翻译等技术都得到了广泛的应用。其中&#xff0c;聊天机器人成为了最受欢迎的人工智能应用之一&#xff0c;它们…...

算法升级之路(七)-盛最多水的容器

给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 原题链接: 盛最多水的容器 解题思路&…...

milvus数据库索引管理

一、建立向量索引 默认情况下&#xff0c;Milvus不会对小于1,024行的段进行索引。 1.准备索引参数 index_params {"metric_type":"L2","index_type":"IVF_FLAT","params":{"nlist":1024} } #"nlist"…...

JVM中的 -Xms参数 设置 JVM 的初始堆大小

在 Java 虚拟机&#xff08;JVM&#xff09;的配置中&#xff0c;-Xms 是一个启动参数&#xff0c;用于设置 JVM 的初始堆大小&#xff08;Initial Heap Size&#xff09;。这个参数对于优化 Java 应用程序的性能非常重要&#xff0c;特别是在处理需要大量内存的应用程序时。 …...

Idea 创建 Spring 项目(保姆级)

描述信息 最近卷起来&#xff0c;系统学习Spring&#xff1b;俗话说&#xff1a;万事开头难&#xff1b;创建一个Spring项目在网上找了好久没有找到好的方式&#xff1b;摸索了半天产出如下文档。 在 Idea 中新建项目 填写信息如下 生成项目目录结构 pom添加依赖 <depende…...

C++多线程学习(一):C++11 多线程快速入门

参考引用 C11 14 17 20 多线程从原理到线程池实战代码运行环境&#xff1a;Visual Studio 2019 1. 为什么要用多线程 任务分解 耗时的操作&#xff0c;任务分解&#xff0c;实时响应 数据分解 充分利用多核CPU处理数据 数据流分解 读写分离&#xff0c;解耦合设计 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 查看…...

性能压力测试的优势与重要性

性能压力测试是软件开发过程中至关重要的一环&#xff0c;它通过模拟系统在极限条件下的运行&#xff0c;以评估系统在正常和异常负载下的表现。这种测试为确保软件系统的可靠性、稳定性和可伸缩性提供了关键信息。下面将探讨性能压力测试的优势以及为什么在软件开发中它具有不…...

AtCoder Beginner Contest 329 题解A~F

A - Spread 输入字符串&#xff0c;字符之间加上空格输出 B - Next 输出数组当中第二大的数 C - Count xxx 统计每个字符出现过的最长长度&#xff0c;再累加即可 #include<bits/stdc.h> #pragma GCC optimize("Ofast") #define INF 0x3f3f3f3f #define I…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...