onlyoffice集成实现编辑预览

news/2024/11/30 15:23:36/

文章目录

  • 前言
  • 一、使用docker方式进行安装
    • 1. 系统要求
    • 2.安装docker
    • 3.安装onlyoffice文件服务器
  • 二、页面集成
    • 1.使用vue3进行集成
      • 安装依赖
      • 使用组件
    • 2.html集成
  • 三、回调Demo
  • 总结


前言

ONLYOFFICE 文档开发者版ONLYOFFICE Docs 是一款功能强大的在线编辑器,适用于文本文档、电子表格、演示文稿和表格。创建复杂的文档、专业的电子表格和令人惊叹的演示文稿。支持的常用 Office 和文档格式:docx、xlsx、pptx、odt、ods、odp、doc、xls、ppt、pdf、txt、rtf、html、epub、csv。完全兼容 OOXML(Office Open XML)格式。使您的用户能够在您自己的应用程序中在浏览器中在线编辑、共享和协作处理文档。

OnlyOffice官网地址

版本说明

  • 社区版(免费,最高20个可同时连接,推荐最高20个用户数)
  • 企业版(付费,根据价格可选择用户数)
  • 开发者版(付费,根据价格可选择用户数)

点我查看版本对比,主要区别如下:
在这里插入图片描述
本文是基于社区版进行开发集成

一、使用docker方式进行安装

官方文档地址

1. 系统要求

  • 中央处理器 双核2 GHz或更高
  • 内存 4 GB或更多
  • 硬盘 至少40 GB的可用空间
  • 交换 至少4 GB,但取决于主机操作系统。越多越好
  • 操作系统 内核版本为3.10或更高版本的amd64 Linux 发行版
  • 其他要求 Docker:Docker 团队支持的任何版本

2.安装docker

如果已经安装忽略此步骤

# 关闭防火墙
systemctl stop firewalld
systemctl disable firewalld# 关闭selinux
sed -i 's/enforcing/disabled/' /etc/selinux/config  # 永久
setenforce 0  # 临时# 关闭swap
swapoff -a  # 临时
sed -ri 's/.*swap.*/#&/' /etc/fstab    # 永久wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo
yum -y install docker-ce
cat > /etc/docker/daemon.json << EOF
{
"registry-mirrors": ["https://b9pmyelo.mirror.aliyuncs.com"]
}
EOF
systemctl enable docker && systemctl start docker

3.安装onlyoffice文件服务器

docker run -i -t -d -p 8089:80 --restart=always onlyoffice/documentserver

说明
Document Server的数据在容器中的储存位置如下:

  • /var/log/onlyoffice对于ONLYOFFICE 文档日志
  • /var/www/onlyoffice/Data证书
  • /var/lib/onlyoffice用于文件缓存
  • /var/lib/postgresql对于数据库

可以用docker exec -it [容器id] bin/bash进入容器
也可以将以上两个目录映射到本地
创建目录:

mkdir -p /app/onlyoffice/DocumentServer/logs
mkdir -p /app/onlyoffice/DocumentServer/data
....

将目录映射至本地:

docker run -i -t -d -p 8089:80 --restart=always \-v /app/onlyoffice/DocumentServer/logs:/var/log/onlyoffice  \-v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data  \-v /app/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice \-v /app/onlyoffice/DocumentServer/db:/var/lib/postgresql -e JWT_SECRET=my_jwt_secret onlyoffice/documentserver

然后访问http://服务器ip:8089
在这里插入图片描述
到这里文件服务器就部署成功了

注意:7.2版本之后默认开启jwt验证。
出现入图问题解决方案如下
在这里插入图片描述

## 更改/etc/onlyoffice/documentserver/local.json
docker exec -it [容器id] bin/bash
cd /etc/onlyoffice/documentserver
sed -i 's/true/false/g' local.json
supervisorctl restart all

OnlyOffice/Docker Document Server(gitHub代码托管)

文档服务器API文档

二、页面集成

参数文档地址:https://api.onlyoffice.com/editors/config/document

1.使用vue3进行集成

官方集成方式

安装依赖

npm install --save @onlyoffice/文档-editor-vue
# or
yarn add @onlyoffice/document-editor-vue

使用组件

<template><DocumentEditorid="docEditor"documentServerUrl="http://服务器地址:8089/":config="config":events_onDocumentReady="onDocumentReady"/>
</template><script>
import { DocumentEditor } from "@onlyoffice/document-editor-vue";export default{name: 'ExampleComponent',components: {DocumentEditor},data() {return {config: {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "https://文件地址"},documentType: "word",editorConfig: {callbackUrl: "http://xxxxxxx/callback",// callbackUrl: "http://192.168.0.143:8080/callback",// lang: "zh-CN" // 中文}}}},methods: {onDocumentReady() {console.log("Document is loaded");}},
}
</script>
<style>
html,body,#app{height: 100%;margin: 0px}
</style>

注意:callbackUrl我自己测试必须为公网地址,127.0.0.1、 192.168.xx、localhost都不行

2.html集成

<!DOCTYPE html>
<html class="full-screen"><head><meta charset="UTF-8"><title>ONLYOFFICE使用方法</title><script type="text/javascript" src="http://服务器地址/web-apps/apps/api/documents/api.js"></script></head><body class="full-screen"><div id="officeContent"></div><script language="javascript" type="text/javascript">var docEditor = new DocsAPI.DocEditor("officeContent",{"document": {"fileType": "docx","title": "Example Document Title.docx","url":"文件地址.docx" ,},"documentType": "word","editorConfig": {"callbackUrl": "回调地址", // 编辑保存回调地址// "lang": "zh-CN" // 中文},"height": "100%","width": "100%",// "type": "embedded" // 嵌入式,默认"desktop"});</script></body><style type="text/css">.full-screen {height: 100%;overflow: hidden;}</style>
</html>

三、回调Demo

我这里使用Java简单写了一个回调项目

package net.koalaclass.controller;import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URL;
import java.util.Scanner;@RestController
public class OnlyOfficeController {//必须是post请求我这里使用的是RequestMapping@RequestMapping("/callback")public String callBack(HttpServletRequest request, HttpServletResponse response) throws IOException {Scanner scanner = new Scanner(request.getInputStream()).useDelimiter("\\A");String body = scanner.hasNext() ? scanner.next() : "";JSONObject jsonObj = JSONObject.parseObject(body);System.out.println(jsonObj.get("status"));if((int) jsonObj.get("status") == 2){String downloadUri = (String) jsonObj.get("url");URL url = new URL(downloadUri);java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();InputStream stream = connection.getInputStream();File savedFile = new File("E:\\");try (FileOutputStream out = new FileOutputStream(savedFile)) {int read;final byte[] bytes = new byte[1024];while ((read = stream.read(bytes)) != -1) {out.write(bytes, 0, read);}out.flush();}connection.disconnect();}return "{\"error\":0}";}
}

回调官网给出了示例和文档:https://api.onlyoffice.com/editors/callback

总结

ONLYOFFICE是一个非常好用的文档编辑器。后续会根据研究的深入继续更新。
本文参考:
https://blog.csdn.net/MaySky5/article/details/125652600
https://blogweb.cn/article/1221081690910


http://www.ppmy.cn/news/706240.html

相关文章

java用openOffice实现在线预览

1. 原理 将 office 文档转换为 pdf &#xff0c;返回文件流给前端实现预览。 当前的主浏览器都支持直接打开pdf文件&#xff0c;从而实现文件预览。如果是其他格式文件则得下载&#xff0c;因此用openOffice实现文件转pdf格式。 1&#xff09;openOffice的安装 下载地址&#…

JAVA结合OpenOffice转换office文档-jodconverter-core-3.0-beta-4

首先机器要安装openoffice软件&#xff0c;下载链接&#xff1a;http://www.openoffice.org/download/index.html 学习结合网友写的&#xff0c;直接给出代码&#xff1a; import java.io.File; import java.io.IOException; import java.util.Properties;import org.artofsolv…

openOffice pdf.js spring boot 微信在线预览office pdf文件

下载openoffice 并安装//pdf.js 案例 https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples//openoffice 连接不上 进入安装目录 cmd 运行以下命令 soffice -headless -accept"socket,host127.0.0.1,port8100;urp;" -nofirststartwizard<!…

onlyoffice二次开发集成、onlyoffic集成

onlyoffice二次开发集成、onlyoffic集成 支持功能 新增word,excel,ppt文档在线多用户协同编辑文档实时通讯批注等功能 下面是demo的功能截图&#xff08;架构&#xff1a;springboot vue &#xff09; demo下载 做了一个在线体验预览的点击查看&#xff08;如果打不开页面…

office在线编辑ONLYOFFICE集成java和前端

准备: onlyoffice/documentServer在线编辑保存 启动一个documentServer的容器 docker run -it --name documentServer -d -p 9090:80 onlyoffice/documentserver 使得可以访问http://localhost:9090/web-apps/apps/api/documents/api.js VUE ONLYOFFICE 基本配置使用 1 引…

Java开发中OnlyOffice、OpenOffice和LibreOffice怎么选?

我把官网贴在下面如果大家有好的使用方法可以分享下。 onlyoffice官网&#xff1a;https://www.onlyoffice.com/ Api官方地址(英文)&#xff1a;https://api.onlyoffice.com/editors/basic Api中文地址(中文)&#xff1a;https://www.onlyoffice.org.cn/guide/usage-mode.html …

Java实现在线预览--openOffice实现

#Java实现在线预览–openOffice实现 ##简介 之前有写了poi实现在线预览的文章&#xff0c;里面也说到了使用openOffice也可以做到&#xff0c;这里就详细介绍一下。 我的实现逻辑有两种&#xff1a; 一、利用jodconverter(基于OpenOffice服务)将文件(.doc、.docx、.xls、.ppt)转…

安卓dj专业打碟机软件_DJ打碟机调速杆,你真的会用吗?

嗨&#xff0c;亲爱的dj爱好者朋友们 你们好 我还是你们的好盆友 Etine 在dj基础混音过程中有一个设备上的功能是大家一定会用到的&#xff0c;那就是调速杆&#xff0c;我们也叫他pitch(音调)杆&#xff01; 在两首舞曲速度不一样的时候&#xff0c;我们可以通过调速杆的调节将…