主要写一下前端vue的使用，需要后端或运维去弄docker服务，然后给前端一个api地址
在vue的Index.html页面添加这个
<script type="text/javascript" src="http://docker服务器ip:docker服务器端口/web-apps/apps/api/documents/api.js"></script>
onlyoffice文档
在线文档编辑使用页面
<template><div><div id="placeholder"></div></div>
</template><script>
export default {name: 'onlyOffice',data() {return {DocEditor: null,}},mounted() {let obj = this.$route.query;console.log('sjsjsjsjjsjsjsjsjsj')this.init(obj,'mounted')},methods: {init(e,formType){if (this.DocEditor != null) {this.DocEditor.destroyEditor();}let url = e.fileurl;let mode = e.mode || 'view';//有两种模式，edit为编辑模式，view为查看let name = e.name || '文件';let id = e.id;let type = e.type;console.log('拿到的在线编辑文件路径',url,mode,name,id,type)let key = new Date().getTime() + '';//用一个动态key止，防止是一样的let file_name = url.match(/\.([^\.]+)$/)[1];//获取文件后缀let houzhuiType;//根据文件后缀判断其在onlioffice里是用什么类型，这里我只写了常用的几种，需要的可以去看文档添加if(file_name == 'ppt' || file_name == 'pptx'){houzhuiType = 'slide';}else if(file_name == 'xlsx' || file_name == 'xls'){houzhuiType = 'cell';}else{houzhuiType = 'word';}console.log('文件后缀',file_name,houzhuiType)let height = document.documentElement.clientHeight - 60 + 'px';//高度let config = {"document": {"fileType": file_name,//文件类型//主键,onlyOffice会做缓存"key": key,"title": name+file_name,//编辑时显示的名称// 文档地址url"url": url, },"documentType": houzhuiType,//文件类型对应在onlyoffice的类型"height": height,"editorConfig": {"mode": mode, //view为查看，edit为编辑"lang": "zh-CN",//默认为英文版,这里设为中文// 自己后端接受文件流的接口地址，同时自己可以拼接参数传给后端"callbackUrl": process.env.VUE_APP_BASE_URL + `/inspection/reportUpload/docx/save?id=${id}&reportType=${type}`,"user": {"id": "22","name": "fff"},"customization": {//开启保存发送状态=6回调"forcesave": true,"anonymous": {//当前操作用户姓名"label": "工具人"},},},events: {"onDocumentStateChange": this.onDocumentStateChange,"onRequestSaveAs": this.onRequestSaveAs,"onDownloadAs": this.onDownloadAs,"onError": this.error,"onWarning": this.warning,"onAppReady": this.action,},};this.DocEditor = new DocsAPI.DocEditor("placeholder", config);},//onlyoffice加载会执行的方法action(e){console.log('开始')},warning(e) {console.log('警告', e)},error(e) {console.log('错误', e)// this.$message.warning('未知错误')},//缓存到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) {console.log('保存',event)},//下载另存为onDownloadAs(event) {// let fileType = event.data.fileType;// let url = event.data.url;// console.log("ONLYOFFICE Document Editor create file: " + url);},}
}
</script><style scoped></style>如果一开始提示文件无法保存，那就是callbackUrl有问题，该接口后端接口没走通
总是打开同一个文件问题，文件路径换了也是打开原来的文件
其实是因为onlyoffice自动缓存了当前这个组件，只要打开过就会缓存起来，第二次打开该页面，mounted周期函数都没执行
解决办法，利用keepalive里的activated方法里重新执行一遍init方法就行
activated(){console.log('????????????????')let obj = this.$route.query;this.init(obj)},
上面是我自己研究的方法，每次进来就重新走一遍流程，其实好像可以通过修改上面配置里config 里的key值来变换，但我不知道怎么去改，就这样吧，能用就行
