OnlyOffice接入Vue2实现文件预览并与JAVA后端结合实现保存

        今天我来介绍一下Onlyoffice的使用，也是花了几天踩坑，也是比较成功的实现了OnlyOffice在Vue2项目的接入，以及OnlyOffice通过保存回调Url实现数据保存。

        要实现预览保存和编辑功能，我们的大致步骤如下：

目录

一、安装OnlyOffice服务，然后启动

二、在Vue项目中引入OnlyOffice，并编写一个OnlyOffice组件

三、实现文件的在线编辑和保存

一、安装OnlyOffice服务，然后启动

1.首先安装docker，这里可以参考文章：https://blog.csdn.net/weixin_44355653/article/details/140267707

2.docker安装Onlyoffice并启动：

直接执行以下命令，就可以拉取并运行Onlyoffice了：

docker run -i -t -d -e TZ="Asia/Shanghai" -p 8000:80 --restart=always -v /usr/local/data/onlyoffice/logs:/var/log/onlyoffice -v /usr/local/data/onlyoffice/data:/var/www/onlyoffice/Data -v /usr/local/data/onlyoffice/lib:/var/lib/onlyoffice -v /usr/local/data/onlyoffice/db:/var/lib/postgresql onlyoffice/documentserver

注：如果无法拉取的话，可以尝试修改镜像源，方法如下：

1. 修改：/etc/docker/daemon.json文件，如果没有就创建，内容如下：

{
       "dns" : [ "8.8.8.8" ],
       "registry-mirrors": [
          "https://2a6bf1988cb6428c877f723ec7530dbc.mirror.swr.myhuaweicloud.com",
          "https://docker.m.daocloud.io",
          "https://hub-mirror.c.163.com",
          "https://mirror.baidubce.com",
          "https://your_preferred_mirror",
          "https://dockerhub.icu",
          "https://docker.registry.cyou",
          "https://docker-cf.registry.cyou",
          "https://dockercf.jsdelivr.fyi",
          "https://docker.jsdelivr.fyi",
          "https://dockertest.jsdelivr.fyi",
          "https://mirror.aliyuncs.com",
          "https://dockerproxy.com",
          "https://mirror.baidubce.com",
          "https://docker.m.daocloud.io",
          "https://docker.nju.edu.cn",
          "https://docker.mirrors.sjtug.sjtu.edu.cn",
          "https://docker.mirrors.ustc.edu.cn",
          "https://mirror.iscas.ac.cn",
          "https://docker.rainbond.cc"
          ]
 }

2. 执行以下两条命令，重新启动docker：

        sudo systemctl daemon-reload

        sudo systemctl restart docker

3.检验OnlyOffice是否启动成功

直接访问：http://你的IP地址:8000/web-apps/apps/api/documents/api.js（改成自己的ip）

如果能看到js文件的代码，那么第一步安装服务就成功了！

二、在Vue项目中引入OnlyOffice，并编写一个OnlyOffice组件

1.首先引入onlyoffice,在public目录下index.html文件中添加：

<script type='text/javascript' src='http://你的IP地址/web-apps/apps/api/documents/api.js'></script>

2.编写OnlyOffice组件，实现预览文件的效果：

首先，创建DocOnlyOffice.vue文件，内容如下：

<!--onlyoffice 编辑器-->
<template>
  <div id='docOnlyOffice'></div>
</template>

<script>


export default {
  name: 'DocOnlyOffice',
  props: {
    option: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      doctype: '',
      docEditor: null,
    }
  },
  beforeDestroy() {
    if (this.docEditor !== null) {
      this.docEditor.destroyEditor();
      this.docEditor = null;
    }
  },
  watch: {
    option: {
      handler: function(n) {
        this.setEditor(n)
        this.doctype = this.getFileType(n.fileType)
      },
      deep: true,
    },
  },
  mounted() {
    if (this.option.url) {
      this.setEditor(this.option)
    }
  },
  methods: {
    async setEditor(option) {
      if (this.docEditor !== null) {
        this.docEditor.destroyEditor();
        this.docEditor = null;
      }
      this.doctype = this.getFileType(option.fileType)
      let config = {
        document: {
          //后缀
          fileType: option.fileType,
          key: option.key ||'',
          title: option.title,
          permissions: {
            edit: option.isEdit,//是否可以编辑: 只能查看，传false
            print: option.isPrint,
            download: true,
            // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
            // "review": true //跟踪变化
          },
          url: option.url,
        },
        documentType: this.doctype,
        documentServer: "http://192.168.1.135:80/onlyoffice/", // 使用代理地址
        editorConfig: {
          callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
          lang: option.lang,//语言设置
          //定制
          customization: {
            autosave: true,//是否自动保存
            chat: false,
            comments: false,
            help: false,
            // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
            //是否显示插件
            plugins: false,
            //fileId是文件主键Id，用于回调保存时查询文件的路径，实现修改文件
            userData:{
              fileId:option.fileId
            },
            logo: {
              image: '',  // 设为空，隐藏 OnlyOffice 图标
              imageEmbedded: '',  // 设为空，隐藏嵌入式 logo
              url: '',  // 设为空，去掉点击跳转链接
              visible: false
            }
          },

          mode:option.model?option.model:'edit',
        },
        width: '100%',
        height: '100%',
        token:option.token||''
      }

      // eslint-disable-next-line no-undef,no-unused-vars
      this.docEditor = new DocsAPI.DocEditor('docOnlyOffice', config)

    },
    getFileType(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
    }
  },
}
</script>


<style scoped>

</style>

然后，创建一个demo.vue文件，引入onlyoffice组件，并对文件进行显示：

<template>
  <div id="calibrationForm">
    <div class='qualityManual-container'>
      <div v-if='show' class='qualityManual-container-office'>
        <DocOnlyOffice :option='option'/>
      </div>
    </div>
  </div>
</template>

<script>
import DocOnlyOffice from '@/components/DocOnlyOffice'


export default {
  name: 'commonForm',
  components: {
    DocOnlyOffice
  },
  data() {
    return {

      //参考vabOnlyOffice组件参数配置
      option: {
        url: '',
        isEdit: '',
        fileType: '',//该变量控制着 文件是word还是excel
        title: '',
        lang: '',
        isPrint: '',
      },
      show: false,
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    /*根据fileId获取文件url*/
    init() {
      let that = this
      let query = {fileId:1}
/*注意：这里的getFileUrlById对应替换成自己的后端请求，后端要返回文件的url、文件的后缀名、等相关信息，具体就是option中的属性字段*/
      getFileUrlById(query).then(res => {
        if (res.data) {
          that.option.lang = 'zh-CN'
          that.option.url = res.data.fileUrl
          that.option.editUrl = res.data.editUrl + "?fileId=" + res.data.fileId//文件保存回调地址
          that.option.title = res.data.formName
          that.option.fileType = 'docx'//该变量控制着 文件是word还是excel
          that.option.isPrint = false
          that.option.fileId = res.data.fileId //文件主键Id，用于回调保存时查询文件信息
          that.option.isEdit = true
          that.show = true
        } else {
          that.$modal.msgWarning(res.msg)
        }
      })
    },
    close() {
      this.show = false
    },
  },
}
</script>

<style scoped>
html, body {
  height: 100%;
}

#calibrationForm {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}

.qualityManual-container {
  padding: 0 !important;
  height: 100%;
}

.qualityManual-container-office {
  width: 100%;
  height: inherit;
}
</style>

到这里，我们就实现了通过Vue引入OnlyOffice，实现了word文件、Excel文件等的在线查看！

三、实现文件的在线编辑和保存

注意，文件要实现保存，需要注意两点：1.在一开始查询文件的时候给option.editUrl赋上后端的文件保存接口Url   2.查询文件的时候给option.fileId附上自己的文件主键Id。

这里我贴上后端保存接口代码：

/*接口3： 文档数据保存回调方法*/
@PostMapping("/save")
public ResponseEntity<?> handleCallback(@RequestBody Map<String, Object> payload,  @RequestParam(value = "fileId", required = false) Long fileId) {
    Map resMap = new HashMap();
    try {
        System.out.println("Received Callback: " + payload);
        // 获取文档状态
        int status = (int) payload.get("status");
        String fileUrl = (String) payload.get("url");

        // 状态 2 代表文档已编辑完成，需要保存
        if (status == 2 && fileUrl != null) {
            //1.根据FileId查询文件的路径地址（注：这一步改成自己的文件信息查询代码）
            BusinessFile businessFile = businessFileService.selectFilesByFileId(fileId);
            //2.将文件流写入该路径
            String filePath = businessFile.getFilePath();
            saveFileFromUrl(fileUrl, filePath);
        }
        // 返回给 OnlyOffice，表示保存成功
        resMap.put("error",0);
        return ResponseEntity.ok(resMap);
    } catch (Exception e) {
        e.printStackTrace();
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(resMap);
    }
}

private void saveFileFromUrl(String fileUrl, String savePath) throws IOException {
    URL url = new URL(fileUrl);
    try (InputStream in = url.openStream();
         OutputStream out = Files.newOutputStream(Paths.get(savePath))) {
        StreamUtils.copy(in, out);
        System.out.println("File saved successfully: " + savePath);
    }
}

        大致就是如上方法，过了快一个月才写的，有些地方有些地方可能没有讲得仔细，如果有问题，可以评论。

        代码的话也基本都贴全了，后端主要就是两个接口：1. 文件查询接口  2.文件保存接口

        文件查询接口需要返回的主要信息就是（1.文件url地址 2.文件保存接口url 3.文件主键Id。 也可以直接在 文件保存接口url 加上参数传递文件主键Id ），其余需要返回的信息就自己看一下option对象有哪些属性吧。