搜了半天全是复制粘贴，受不了了！！！！1分钟带你部署，应用，整合onlyoffice

admin管理员组

文章数量:1549953

onlyoffice服务的部署（docker）

1.docker拉取onlyoffice镜像

docker pull onlyoffice/documentserver

2.docker启动服务

docker run -i -t -d --name onlyoffice \ -p 10001:80 \ -e JWT_ENABLED=true \ -e JWT_SECRET=root123456 \ onlyoffice/documentserver

ps：onlyoffice 7.2之后默认需要jwt token认证

可以通过JWT_ENABLED=false去除jwt认证，JWT_SECRET是设置的密钥,启动时随意设置（后面spring配置文件中用到）

以下服务端的首页

3.创建一个示例

sudo docker exec 容器ID sudo supervisorctl start ds:example

4.在首页点击GO TO TEST EXAMPLE 按钮，即可打开示例

基本所有的功能都有，而且还支持chatgpt插件

OnlyOffice如何集成到spring中

1.从官网拉取/下载spring集成的代码

https://api.onlyoffice/editors/demopreview

2.配置文件修改，关键的地方有2处，其他的基本可以不用改

files.docservice.url.site=http://192.168.2.205:10001/ #服务端地址，注意不要最后漏掉/，否则会读取不到js的api

files.docservice.secret=root123456  #docker启动时设置的密钥

3.启动项目时注意要使用jdk11以上的版本，否则会报错

4.启动之后访问http://ip:4000/就能看到示例

注意项：

1.项目中生成token的方法集成在/editors接口中，如果前端需要嵌入业务的系统的vue代码中，就需要将token返回给前端，以下关键的属性

Document document = fileModel.getDocument(); // 文档的对象
String token = fileModel.getToken();  // token
String key = document.getKey();  // 文件的唯一标识
String url = document.getUrl();  // 文件的url
Permission permissions = document.getPermissions(); //权限
EditorConfig editorConfig = fileModel.getEditorConfig(); //配置
com.onlyoffice.integration.documentserver.models.filemodel.User user1 = editorConfig.getUser(); //用户信息

将这信息正确返回给前端才能正常嵌入私有项目中

onlyoffice中的权限问题：

1.首先会分成不同的groups，然后groups中包含若干user，user包含不同的权限，就是以上的Permission信息

2.该接口关键的参数，必填项（fileName,uid,ulang)注意后面两个参数uid,ulang是cookie类型的，根据这三个关键参数就能实现文档的编辑，并且也会生成相应的token

3.需要注意的是这里的uid,onlyoffice中默认的uid有1,2,3,4四个，四个用户在官方文档中有体现，由于是开源版本，文档中权限这一块能否去掉，并没有体现

OnlyOffice如何集成到vue中,主要是js代码

vue代码

<template>
  <div :id="id"></div>
</template>
<script>
import { healthcheck, getToken } from '@/api/onlyoffice'

let loadScriptPromise
export default {
  props: {
    folder: {
      type: String,
      default: '', // 放置在根目录
    },
  },
  data() {
    return {
      id: '',
      url: process.env.VUE_APP_ONLYOFFICE_SERVER,
    }
  },
  created() {
    this.id = `editor_${this._uid}`
    this.loadScript().then(() => {
      this.checkOnlyOffice().then(() => {
        this.getEditorToken().then(token => {
          this.$nextTick(() => {
            this.initEditor(token)
          })
        })
      })
    })
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.requestClose()
    }
  },
  methods: {
    loadScript() {
      if (!loadScriptPromise) {
        loadScriptPromise = new Promise((resolve, reject) => {
          const scriptId = 'onlyOffice-editor'
          let script = document.querySelector(`#${scriptId}`)
          if (script === null) {
            script = document.createElement('script')
            script.id = scriptId
            const origin = process.env.VUE_APP_ONLYOFFICE_ORIGIN_SERVER
            script.src = `${origin}/web-apps/apps/api/documents/api.js`
            script.addEventListener('load', resolve)
            script.addEventListener('error', reject)
            document.head.appendChild(script)
          }
        })
      }
      return loadScriptPromise
    },
    checkOnlyOffice() {
      return new Promise((resolve, reject) => {
        healthcheck()
          .then(res => {
            if (res) {
              resolve()
            } else {
              this.$message.error('OnlyOffice 服务异常，请联系管理员')
              reject()
            }
          })
          .catch(() => {
            this.$message.error('OnlyOffice healthcheck 失败，请联系管理员')
            reject()
          })
      })
    },
    getEditorToken() {
      return new Promise((resolve, reject) => {
        getToken({
          fileName: 'new.docx',
        })
          .then(res => {
            if (res.success) {
              resolve({
                ...res.result,
                fileName: 'new.docx',
              })
            } else {
              this.$message.error('获取 OnlyOffice token 失败，请联系管理员')
              reject()
            }
          })
          .catch(() => {
            this.$message.error('获取 OnlyOffice token 失败，请联系管理员')
            reject()
          })
      })
    },
    initEditor(token) {
      // console.log(token)
      console.log(token.token)
      const config = {
        // 编辑器类型，支持 desktop、mobile
        type: 'desktop',
        // 编辑器宽度
        width: '100%',
        // 编辑器高度
        height: 600,
        // 编辑器类型，支持 word、cell（表格）、slide（PPT）
        documentType: 'word',
        document: {
          title: token.fileName,
          url: token.url,
          fileType: 'docx',
          key: token.key,
          permissions: token.permissions,
          // permissions: {
          //   chat: false, // 是否显示聊天
          // },
        },
        editorConfig: {
          mode: 'edit',
          // 业务服务器上面的回调地址
          callbackUrl: `${this.url}/track?fileName=${token.fileName}`,
          lang: 'zh-CN',
          user: token.user,
          customization: {
            // anonymous: {
            //   request: false, // 匿名用户是否发起 ‘enter a name’ 请求
            //   // label: 'Guest', // 匿名用户的前缀标签
            // },
            forcesave: true, // 强制保存
            comments: false, // 是否显示评论
            compactHeader: true, // 是否显示紧凑的头部
            compactToolbar: true, // 是否显示紧凑的工具栏
            // customer: {}, // 自定义 editor About section 信息
            // compatibleFeatures: true, //  only compatible with the OOXML format
            features: {
              spellcheck: {
                // 单词检查
                mode: true,
              },
            },
            feedback: true, // 定义反馈 form, false 不展示反馈入口
            goback: true, // 是否显示 'Open file location' 按钮
            help: true, // 是否显示file -> help 菜单
            hideNotes: true, // 是否隐藏  note panel
            hideRightMenu: true, // 是否隐藏右键菜单
            hideRulers: true, // 是否隐藏标尺
            // integrationMode: 'embed',
            logo: {}, // 自定义左上角 logo
            macros: true, // 是否自动运行宏
            // macrosMode: 'warn', // 宏运行模式模式
            // mentionShare: true, // 评论提及和通知
            // mobileForceView: true, // 是否强制在移动设备上查看不编辑
            plugins: true, // 是否启用插件
            // review: {}, // 审阅设置
            // submitForm: false, // pdffromat 是否显示提交按钮
            toolbarHideFileName: true, // toolbar后面是否隐藏文件名
            toolbarNoTabs: true, // toolbar 选项卡的的 tab 样式
            // uiTheme: 'theme-classic-light' // 主题
            // unit: 'cm', // 单位
            // zoom: 100, // 缩放比例
          },
          // embedded: {}, // 嵌入式设置
          // plugins: {}, // 插件设置
          // 事件设置
          events: {
            onRequestClose: () => {
              // debugger
              if (window.opener) {
                window.close()
                return
              }
              this.editor.destroyEditor()
            },
            onDocumentReady: () => {
              console.log('this', this)
              this.connector = this.editor.createConnector()
            },
          },
        },
        token: token.token,
      }
      this.editor = new DocsAPI.DocEditor(this.id, config)
      window.editor = this.editor
      this.$emit('ready', this.editor)
    },
  },
}
</script>

 js代码

import axios from 'axios'
import { notification } from 'ant-design-vue'

# Onlyoffice java服务地址
VUE_APP_ONLYOFFICE_SERVER=http://192.168.2.46:4000

# docker服务地址
VUE_APP_ONLYOFFICE_ORIGIN_SERVER=http://192.168.2.205:10001

# Onlyoffice 接口前缀配置
VUE_APP_ONLYOFFICE_API_PREFIX=/onlyofficeApi

VUE_APP_ONLYOFFICE_ORIGIN_API_PREFIX=/onlyofficeOriginApi

const onlyofficeApiPrefix = process.env.VUE_APP_ONLYOFFICE_API_PREFIX
const onlyofficeOriginApiPrefix = process.env.VUE_APP_ONLYOFFICE_ORIGIN_API_PREFIX

const request = axios.create({
  timeout: 60000,
  baseURL: ''
})


request.interceptors.response.use(response => {
  const { url } = response.config
  const { data } = response
  if (data.success || url.includes('healthcheck')) {
    return data
  } else {
    notification.error({
      message: '系统提示',
      description: data.message,
      duration: 4
    })
    return Promise.reject(response)
  }
})

export function healthcheck() {
  return request({
    method: 'get',
    url: `${onlyofficeOriginApiPrefix}/healthcheck`
  })
}

export function getToken(params) {
  return request({
    method: 'get',
    params,
    url: `${onlyofficeApiPrefix}/getToken`
  })
}

// Onlyoffice 文档转换接口地址
export function onlyofficeConversion (data) {
  return request({
    method: 'post',
    url: `${onlyofficeApiPrefix}/convertService.ashx`,
    data
  })
}

// Onlyoffice 文档构建接口地址
export function onlyofficeBuilder (data) {
  return request({
    method: 'post',
    url: `${onlyofficeApiPrefix}/docbuilder`,
    data
  })
}

本文标签： 半天带你受不了了ONLYOFFICE