vue onlyoffice在线编辑与预览，文件无法保存问题，始终打开同一文件的问题

主要写一下前端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值来变换，但我不知道怎么去改，就这样吧，能用就行