OnlyOffice

更多OnlyOffice参数的使用，点此访问 ONLYOFFICE 官网

1. 安装依赖: pnpm install --save @onlyoffice/document-editor-vue 或 yarn add @onlyoffice/document-editor-vue

2.引入：import { DocumentEditor } from '@onlyoffice/document-editor-vue'

TIP

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

示例

<script lang="ts" setup name="IkOnlyOffice">
import {ref} from 'vue'
import { DocumentEditor } from '@onlyoffice/document-editor-vue'
// onlyofiice配置项
const documentOptions = ref({
  width: '100%',             //文档的宽度
  height: '100%',           //文档的高度
  document: {
      fileType:  'doc/xlsx',//文档类型  
      key: `${new Date().getTime()}`, // 唯一key
      title: "测试文档",    //文档名称
      url: ''              // 文档下载地址
    },
  documentType: 'word/cell/slide',  //文档类型  (word  cell(表格) slide（PPT）)
  editorConfig: {
    callbackUrl: "",      // 保存文档的回调函数
    lang: 'zh-CN',       //中文
  },
  mode: "edit/view",     //文档当前的模式edit-编辑  view-预览
  token: ''             // 上面提到的为了通过JWT验证。获取的token验证
})
// 获取加密后的token
const getToken = async () => {
  const params = {
    ...documentOptions.value
  }
  const { data, msg, success } = await onlyOfficeApi.handleToken(params)
  if (success)
    documentOptions.value.token = data
}
// getToken()

// 文档初始化
const onDocumentReady = () => {
  console.log('文档加载中')
}
</script>
<template>
    <DocumentEditor
      :document-server-url="documentServerUrl"
      :config="documentOptions"
      :events_onDocumentReady="onDocumentReady"
    />
</template>