使用OnlyOffice接入office在线编辑
作者:互联网
搭建OnlyOffice
使用Docker搭建OnlyOffice服务
# 拉取包涵中文字符的镜像
docker pull kenlk/onlyoffice
# 启动容器
docker run -i -t -d -p 80:80 --restart=always kenlk/onlyoffice
需要做https设置及宿主机文件夹映射,请参考官网文档:https://helpcenter.onlyoffice.com/installation/docs-community-install-docker.aspx
前端Vue接入Demo
- index.html引入api.js
<script type="text/javascript" src="http://onlyoffice服务地址/web-apps/apps/api/documents/api.js"></script>
- 构建加载参数
<template>
<div id="monitorOffice"></div>
</template>
<script>
import { handleDocType } from '@/utils/constants'
export default {
props: {
option: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
doctype: ''
}
},
mounted() {
if (this.option.url) {
this.setEditor(this.option)
}
},
methods: {
setEditor(option) {
this.doctype = handleDocType(option.fileType)
// office配置参数
let config = {
document: {
fileType: option.fileType,
key: option.key,
title: option.title,
permissions: {
comment: false,
download: false,
modifyContentControl: true,
modifyFilter: true,
print: false,
edit: option.isEdit//是否可以编辑: 只能查看,传false
// "fillForms": true,//是否可以填写表格,如果将mode参数设置为edit,则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
// "review": true //跟踪变化
},
url: option.url
},
documentType: this.doctype,
editorConfig: {
callbackUrl: option.editUrl,//"编辑word后保存时回调的地址,这个api需要自己写了,将编辑后的文件通过这个api保存到自己想要的位置
//语言设置
lang: 'zh-CN',
location: 'zh-CN',
customization: {
autosave: false,//是否自动保存
chat: false,
forcesave: true,// true 表示强制文件保存请求添加到回调处理程序
feedback: {
visible: false // 隐藏反馈按钮
},
comments: false,
help: false,
hideRightMenu: true,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
logo: {
image: 'https://file.iviewui.com/icon/viewlogo.png',
imageEmbedded: 'https://file.iviewui.com/icon/viewlogo.png'
},
spellcheck: false//拼写检查
}
},
width: '100%',
height: '100%'
}
let docEditor = new DocsAPI.DocEditor('monitorOffice', config)
}
},
watch: {
option: {
handler: function(n, o) {
this.setEditor(n)
this.doctype = handleDocType(n.fileType)
},
deep: true
}
}
}
</script>
export function handleDocType(fileType) {
let docType = '';
let fileTypesDoc = [
'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps'
];
let fileTypesCsv = [
'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'
];
let fileTypesPPt = [
'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx'
];
if (fileTypesDoc.includes(fileType)) {
docType = 'text'
}
if (fileTypesCsv.includes(fileType)) {
docType = 'spreadsheet'
}
if (fileTypesPPt.includes(fileType)) {
docType = 'presentation'
}
return docType;
}
详细参数,参考官网api: https://api.onlyoffice.com/editors/advanced
后端回调接口
- 保存回调直接保存阿里OSS中
@Slf4j
@RestController
@RequestMapping("/api")
@Api(tags = "文档相关接口")
public class DocumentApiController {
@Autowired
private OssService aliOssService;
/**
* 编辑后回调--保存文件实体
* <p>onlyoffice在编辑后关闭文件的时候,会回调该接口</p>
*
* @param callback
*/
@PostMapping("/callback")
public DocumentEditCallbackResponse saveDocumentFile(@RequestBody DocumentEditCallback callback, @RequestParam("fileName") String fileName) throws Exception {
if (log.isInfoEnabled()) {
log.info("### 编辑后回调, 回调信息:{}", callback);
}
log.info("文档状态:{}", callback.getStatus());
// 需要保存时写出文件
if (callback.getStatus() == DocumentStatus.READY_FOR_SAVING.getCode() || callback.getStatus() == DocumentStatus.BEING_EDITED_STATE_SAVED.getCode()) {
if (log.isDebugEnabled()) {
log.debug("@@@ 开始保存文件。。。");
}
String url = null;
if (StringUtils.hasText(fileName)) {
if (fileName.contains("http")) {
fileName = URLUtil.getPath(fileName);
if (StringUtils.hasText(fileName)) {
// 去除"/"
fileName = fileName.substring(1);
}
}
url = aliOssService.uploadFile(callback.getUrl(), fileName);
log.info("url==={}", url);
}
if (log.isDebugEnabled()) {
log.debug("@@@ 保存文件结束!");
}
if (StringUtils.isEmpty(url)) {
return DocumentEditCallbackResponse.failue();
}
}
return DocumentEditCallbackResponse.success();
}
}
标签:false,option,office,接入,true,fileType,fileName,OnlyOffice,log 来源: https://www.cnblogs.com/ken-lk/p/14759916.html