onlyoffice集成实现编辑预览

文章目录

前言

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

# 关闭selinuxsed -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 enabledocker&& 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.jsondockerexec -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进行集成

官方集成方式

安装依赖

npminstall --save @onlyoffice/文档-editor-vue
# oryarnadd @onlyoffice/document-editor-vue

使用组件

<template><DocumentEditorid="docEditor"documentServerUrl="http://服务器地址:8089/":config="config":events_onDocumentReady="onDocumentReady"/></template><script>import{ DocumentEditor }from"@onlyoffice/document-editor-vue";exportdefault{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集成

<!DOCTYPEhtml><htmlclass="full-screen"><head><metacharset="UTF-8"><title>ONLYOFFICE使用方法</title><scripttype="text/javascript"src="http://服务器地址/web-apps/apps/api/documents/api.js"></script></head><bodyclass="full-screen"><divid="officeContent"></div><scriptlanguage="javascript"type="text/javascript">var docEditor =newDocsAPI.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><styletype="text/css">.full-screen{height: 100%;overflow: hidden;}</style></html>

三、回调Demo

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

packagenet.koalaclass.controller;importcom.alibaba.fastjson.JSONObject;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.*;importjava.net.URL;importjava.util.Scanner;@RestControllerpublicclassOnlyOfficeController{//必须是post请求我这里使用的是RequestMapping@RequestMapping("/callback")publicStringcallBack(HttpServletRequest request,HttpServletResponse response)throwsIOException{Scanner scanner =newScanner(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 =newURL(downloadUri);java.net.HttpURLConnection connection =(java.net.HttpURLConnection) url.openConnection();InputStream stream = connection.getInputStream();File savedFile =newFile("E:\\");try(FileOutputStream out =newFileOutputStream(savedFile)){int read;finalbyte[] bytes =newbyte[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

标签： docker 前端 vue.js

本文转载自: https://blog.csdn.net/qq_43548590/article/details/129948103
版权归原作者 落魄实习生 所有，如有侵权，请联系我们删除。

onlyoffice集成实现编辑预览

文章目录

前言

一、使用docker方式进行安装

1. 系统要求

2.安装docker

3.安装onlyoffice文件服务器

二、页面集成

1.使用vue3进行集成

安装依赖

使用组件

2.html集成

三、回调Demo

总结

发表评论

“onlyoffice集成实现编辑预览”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航