admin管理员组文章数量:1644570
1.官网资料
官网中文地址
官网api地址
2.Docker部署OnlyOffice
下载docker, 不会用docker请自行查资料
- 拉去镜像
docker pull onlyoffice/documentserver
- 启动容器
# 8085 端口映射 到 容器的 80端口 # 指定文件代理映射路径 docker run -i -t -d -p 8085: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 onlyoffice/documentserver
- 启动容器后, 稍等片刻访问,会成功会出现以下页面.
3. index.html
在vue的项目index.html引入对应服务的js, 服务器ip不要用127.0.0.1 跟 localhost
<script type="text/javascript" src="http://docker服务器ip:docker服务器端口/web-apps/apps/api/documents/api.js"></script>
4.demo.vue
<template>
<div>
<div id="placeholder">
</div>
</div>
</template>
<script>
export default {
name: 'OnlyOffice',
data() {
return {
DocEditor: null,
}
},
mounted() {
if (this.DocEditor != null) {
this.DocEditor.destroyEditor();
}
let height = document.body.clientHeight - 50 + 'px';
let config = {
"document": {
"fileType": "docx",
//主键,onlyOffice会做缓存
"key": "1",
"title": "我1的测试文档.docx",
# 文档地址url
"url": "http://127.0.0.1:9020/1.doc"
},
"documentType": "word",
"height": height,
"editorConfig": {
"lang": "zh-CN",
# 自己后台回调的接口地址 不要使用 127.0.0.1 或 localhost
"callbackUrl": "http://192.168.1.222:8088/api/onlyOffice/save/"+"123",
"user": {
"id": "1",
"name": "测试人"
},
"customization": {
//开启保存发送状态=6回调
"forcesave": true,
"anonymous": {
//当前操作用户姓名
"label": "test2022"
},
},
},
events: {
"onDocumentStateChange": this.onDocumentStateChange,
"onRequestSaveAs": this.onRequestSaveAs,
"onDownloadAs": this.onDownloadAs,
},
};
this.DocEditor = new DocsAPI.DocEditor("placeholder", config);
},
methods: {
//缓存到onlyOffice数据库里面的回调
onDocumentStateChange(event) {
if (event.data) {
console.log("The document changed");
console.log(event);
console.log(event.data);
} else {
console.log("Changes are collected on document editing service");
}
},
//点击保存按钮的回调
onRequestSaveAs(event) {
let fileType = event.data.fileType;
let title = event.data.title;
let url = event.data.url;
console.log(fileType);
console.log(title);
console.log(url);
},
//下载另存为
onDownloadAs(event) {
let fileType = event.data.fileType;
let url = event.data.url;
console.log("ONLYOFFICE Document Editor create file: " + url);
},
}
}
</script>
<style lang="scss" scoped>
</style>
5.后端Controller回调函数
/**
* OnlyOffice-Controller
*/
@RequestMapping("/api/onlyOffice")
@RestController
@Slf4j
public class OnlyOfficeController {
@PostMapping("/save/{fileId}")
public ResponseEntity<Map> save(@RequestBody Map param, @PathVariable String fileId) {
log.info("method[save] fileId:{}", fileId);
log.info("method[save] param:{}", JsonUtils.toJson(param));
//文档主键
Long id = MapUtil.getLong(param, "key");
log.info("method[save] id:{}", id);
//操作状态 1:编辑 2:准备保存 3: 保存错误 4:文档关闭没有修改 6: 正在编辑文档,但保存了当前文档状态 7:强制保存文档时发生错误
Integer status = MapUtil.getInteger(param, "status", -1);
if (status == 2) {
//当前在操作用户id
List<Long> usersId = MapUtil.getValueAsList(param, "users");
log.info("method[save] usersId:{}", usersId.toString());
}
if (status == 6) {
//TODO 可以利用websocket 推送到页面 产生提示语
log.info("method[save] 正在编辑文档,但保存了当前文档状态. url:{}", MapUtil.getString(param, "url"));
Map result = new HashMap(1);
result.put("error", "0");
result.put("msg", "操作成功");
return ResponseEntity.ok(result);
}
Map result = new HashMap(1);
result.put("error", "0");
return ResponseEntity.ok(result);
}
}
本文标签: ONLYOFFICEvue
版权声明:本文标题:OnlyOffice 结合 Vue 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729393958a1199676.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论