OnlyOffice在线文档集成方案

1.在index.html文件中使用script引入后端服务部署后生成的onlyOffice js文件

<script
  type="text/javascript"
  src="http://10.50.192.2:7012/web-apps/apps/api/documents/api.js"
  ></script>

2.创建公用配置项

import website from '/@/settings/website';
export function getFile(type, id) {
  return {
    //文件url根据实际项目需求配置
    url: `${website.minio}${type}/${id}.docx`,
    //根据后端部署配置保存文件回调函数
    editUrl: `http://10.50.192.2:7001/onlyOffice/save?id=${id}&type=${type}`,
    isEdit: true,
    //根据实际项目使用文件格式配置
    fileType: 'docx',
    title: '在线编辑',
    lang: 'zh-CN',
    isPrint: false,
    token: '',
    user: { id: null, name: ' ' },
  };
}

3.创建文件格式集

export function getFileType(fileType) {
  let docType = '';
  const fileTypesDoc = [
    'doc',
    'docm',
    'docx',
    'dot',
    'dotm',
    'dotx',
    'epub',
    'fodt',
    'htm',
    'html',
    'mht',
    'odt',
    'ott',
    'pdf',
    'rtf',
    'txt',
    'djvu',
    'xps',
  ];
  const fileTypesCsv = ['csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'];
  const 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;
}

4.创建onlyOffice组件

<template>
  <div class="qualityManual-container">
    <div class="qualityManual-container-office">
      <div id="onlyOfficeEl"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, onUnmounted } from 'vue';
  //公用文件类型
  import { getFileType } from './onlyOffice/office';
  //公用配置项
  import { getFile as getFileOption } from './onlyOffice/option';

  type Props = {
    fileId: string;//传入文件id
    fileType: string;//传入接口地址
    view: string;
  };

  const props = defineProps<Props>();

  const option = ref({});//配置项
  const doctype = ref('');//文件类型
  const docEditor = ref();//文档示例

  //获取公用配置项,并实例化onlyoffice
  const getFile = () => {
    let tempOption = getFileOption(props.fileType, props.fileId);
    option.value = {
      ...tempOption,
    };
    setTimeout(() => {
      setEditor(option.value);
    }, 500);
  };

  //实例化onlyoffice
  const setEditor = (option) => {
    if (docEditor.value) {
      docEditor.value.destroyEditor();
      docEditor.value = null;
    }

    //获取文件类型
    doctype.value = getFileType(option.fileType);

    //定制化onlyoffice配置
    let config = {
      document: {
        //后缀
        fileType: option.fileType,
        key: option.key,
        // key: option.key || '',
        title: option.title,
        permissions: {
          edit: props.view ? false : option.isEdit, //是否可以编辑: 只能查看，传false
          print: option.isPrint,
          download: true,
          // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
          // "review": true //跟踪变化
        },
        url: option.url,
      },
      documentType: doctype.value,
      editorConfig: {
        callbackUrl: option.editUrl, //"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
        lang: option.lang, //语言设置
        //定制
        customization: {
          forcesave: true,
          autosave: true, //是否自动保存
          chat: false,
          comments: false,
          help: false,
          // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
          //是否显示插件
          plugins: false,
          spellcheck: false,
        },
        user: {
          id: option.user.id,
          name: option.user.name,
        },
        mode: option.model ? option.model : 'edit',
      },
      width: '100%',
      height: '100%',
      token: option.token || '',
    };
    console.log(config);
    //创建doc实例
    docEditor.value = new DocsAPI.DocEditor('onlyOfficeEl', config);
  };

  //销毁示例
  onUnmounted(() => {
    if (docEditor.value !== null) {
      docEditor.value.destroyEditor();
      docEditor.value = null;
    }
  });

  watch(
    () => props.fileId,//当传入文件id变更时重新实例化组件
    () => {
      getFile();
    },
    {
      immediate: true,//首次传参立刻执行
    },
  );
</script>
<style lang="less" scoped>
  .qualityManual-container {
    padding: 0 !important;
    height: 100%;
  }

  .qualityManual-container-office {
    width: 100%;
    height: calc(100% - 10px);
    user-select: none;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      width: 100px;
      height: 25px;
      user-select: none;
    }
  }
</style>

5.引用onlyoffice组件

//组件传参根据实际项目配置
<TheOnlyOffice
  :fileId="route.query.id"
  :fileType="route.query.fileType"
  :view="route.query.view"
/>

发送评论 编辑评论

发送评论编辑评论