前言
ONLYOFFICE 文檔開發(fā)者版ONLYOFFICE Docs 是一款功能強(qiáng)大的在線編輯器，適用于文本文檔、電子表格、演示文稿和表格。創(chuàng)建復(fù)雜的文檔、專業(yè)的電子表格和令人驚嘆的演示文稿。支持的常用 Office 和文檔格式：docx、xlsx、pptx、odt、ods、odp、doc、xls、ppt、pdf、txt、rtf、html、epub、csv。完全兼容 OOXML(Office Open XML)格式。使您的用戶能夠在您自己的應(yīng)用程序中在瀏覽器中在線編輯、共享和協(xié)作處理文檔。
OnlyOffice官網(wǎng)地址
版本說明
- 社區(qū)版（免費(fèi)，最高20個(gè)可同時(shí)連接，推薦最高20個(gè)用戶數(shù)）
- 企業(yè)版（付費(fèi)，根據(jù)價(jià)格可選擇用戶數(shù)）
- 開發(fā)者版（付費(fèi)，根據(jù)價(jià)格可選擇用戶數(shù)）
點(diǎn)我查看版本對比，主要區(qū)別如下：
本文是基于社區(qū)版進(jìn)行開發(fā)集成
一、使用docker方式進(jìn)行安裝
官方文檔地址
1. 系統(tǒng)要求
- 中央處理器 雙核2 GHz或更高
- 內(nèi)存 4 GB或更多
- 硬盤 至少40 GB的可用空間
- 交換 至少4 GB，但取決于主機(jī)操作系統(tǒng)。越多越好
- 操作系統(tǒng) 內(nèi)核版本為3.10或更高版本的amd64 Linux 發(fā)行版
- 其他要求 Docker：Docker 團(tuán)隊(duì)支持的任何版本
2.安裝docker
如果已經(jīng)安裝忽略此步驟
# 關(guān)閉防火墻
systemctl stop firewalld
systemctl disable firewalld
# 關(guān)閉selinux
sed -i 's/enforcing/disabled/' /etc/selinux/config # 永久
setenforce 0 # 臨時(shí)
# 關(guān)閉swap
swapoff -a # 臨時(shí)
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文件服務(wù)器
docker run -i -t -d -p 8089:80 --restart=always onlyoffice/documentserver
說明
Document Server的數(shù)據(jù)在容器中的儲存位置如下：
- /var/log/onlyoffice對于ONLYOFFICE 文檔日志
- /var/www/onlyoffice/Data證書
- /var/lib/onlyoffice用于文件緩存
- /var/lib/postgresql對于數(shù)據(jù)庫
可以用docker exec -it [容器id] bin/bash進(jìn)入容器
也可以將以上兩個(gè)目錄映射到本地
創(chuàng)建目錄：
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://服務(wù)器ip:8089
到這里文件服務(wù)器就部署成功了
注意：7.2版本之后默認(rèn)開啟jwt驗(yàn)證。
出現(xiàn)入圖問題解決方案如下
## 更改/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代碼托管）
文檔服務(wù)器API文檔
二、頁面集成
參數(shù)文檔地址：https://api.onlyoffice.com/editors/config/document
1.使用vue3進(jìn)行集成
官方集成方式
安裝依賴
npm install --save @onlyoffice/文檔-editor-vue
# or
yarn add @onlyoffice/document-editor-vue
使用組件
<template>
<DocumentEditor
id="docEditor"
documentServerUrl="http://服務(wù)器地址: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我自己測試必須為公網(wǎng)地址，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://服務(wù)器地址/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": "回調(diào)地址", // 編輯保存回調(diào)地址
// "lang": "zh-CN" // 中文
},
"height": "100%",
"width": "100%",
// "type": "embedded" // 嵌入式，默認(rèn)"desktop"
});
</script>
</body>
<style type="text/css">
.full-screen {
height: 100%;
overflow: hidden;
}
</style>
</html>
三、回調(diào)Demo
我這里使用Java簡單寫了一個(gè)回調(diào)項(xiàng)目
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}";
}
}
回調(diào)官網(wǎng)給出了示例和文檔：https://api.onlyoffice.com/editors/callback文章來源：http://www.zghlxwxcb.cn/news/detail-445021.html
總結(jié)
ONLYOFFICE是一個(gè)非常好用的文檔編輯器。后續(xù)會根據(jù)研究的深入繼續(xù)更新。
本文參考：
https://blog.csdn.net/MaySky5/article/details/125652600
https://blogweb.cn/article/1221081690910文章來源地址http://www.zghlxwxcb.cn/news/detail-445021.html
到了這里，關(guān)于onlyoffice集成實(shí)現(xiàn)編輯預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
