IkOnlyOffice

IkOnlyOffice基于OnlyOffice封装，点此访问 ONLYOFFICE 官网

props

props	类型	说明	默认值
documentServerUrl	String	onlyOffice文件服务器的服务地址	''
mode	String	模式(edit 编辑模式 view是查看模式)	edit
configOptions	Object	配置项	{}
officeHeight	String	onlyOffice的宽度	100%
token	String	加密后的文档token	''

TIP

为了通过JWT验证，在初始化ONLYOFFICE前，需要接口获取唯一token进行验证。

示例

<script lang="ts" setup>
import { ref } from "vue";
import IkOnlyOffice from "@iking-ui/components/IkOnlyOffice";

// 初始化配置
const onlyOfficeConfig = ref(null);
const onlyOfficeFileId = ref(""); // 文件id
const token = ref(""); // 登录获取的token
const initOnlyOfficeConfig = () => {
  onlyOfficeConfig.value = {
    documentType: "word",
    document: {
      fileType: "doc",
      key: `${new Date().getTime()}`,
      title: "测试文档",
      lang: "zh-CN",
      url: `http://192.168.1.xxx:8000/server/oss/download?fileUrl=${onlyOfficeFileId.value}`, //目前为测试地址
    },
    editorConfig: {
      callbackUrl: `http://192.168.1.xxx:8000/business/summary/office/update/${onlyOfficeFileId.value}?token=${token.value}`, // 保存的回调函数
    },
  };
};
initOnlyOfficeConfig();
</script>
<template>
  <div style="height:700px">
    <IkOnlyOffice
      mode="edit"
      :config-options="onlyOfficeConfig"
      documentServerUrl="http://192.168.1.xxx:3080"
    />
  </div>
</template>
<style scoped lang="scss"></style>