onlyoffice组件

用法

安装

npm i onlyoffice-vue-gwd

使用

<onlyoffice :id="config.document.key" :config="config"></onlyoffice>

完整配置

config:{
  document: {
    /** 文档编辑器的唯一标识符，多人编辑时 key一样则相当于在编辑同一个文档 */
    key: string,
    /** 文件编辑窗口名称，保存时后台callbackUrl接口会接收到这个字段命名的文件名 */
    title: string,
    /** 文件加载路径 */
    url: string,
    /** 文档类型后缀名如doc、docx 、xls、xlsx等 */
    fileType: string
  },
  /** onlyoffice服务器 域名 或 地址+端口号 */
  documentServerUrl: string,
  /** cell 表格 slide ppt演示 word 文档 */
  documentType: "word" | "cell" | "slide",
  /** 编辑器配置 */
  editorConfig: {
    /** 回调URL */
    callbackUrl: string,
    /** 语言 */
    lang?: string,
    /** 编辑模式、查看模式 */
    mode?: "edit" | "view",
    /** 自定义配置 */
    customization?: {
      /** 定义是显示还是隐藏“帮助”菜单按钮。默认值为true。 */
      help?: Boolean,
      /** 定义在第一次加载时是显示还是隐藏右侧菜单。默认值为false。 */
      hideRightMenu?: Boolean,
      /** 定义是启用还是禁用“自动保存”菜单选项。默认值为true。 */
      autosave?: Boolean,
      /** 定义保存按钮是否显示，默认false */
      forcesave?: Boolean,
      /** 定义“聊天”菜单按钮是显示还是隐藏；默认值为true。 */
      chat?: Boolean,
      /** 定义用户是否只能编辑和删除他的评论。默认值为false。 */
      commentAuthorOnly?: Boolean,
      /** 定义是显示还是隐藏“注释”菜单按钮；默认值为true。 */
      comments?: Boolean,
      /** 定义是否将菜单栏放在在徽标旁边使界面更加紧凑，默认false。 */
      compactHeader?: Boolean,
      /** 定义显示的顶部工具栏类型是完整（false）还是紧凑（true）。默认值为false。 */
      compactToolbar?: Boolean,
      /** 定义仅与OOXML格式兼容的功能的使用。默认值为false。 */
      compatibleFeatures?: Boolean,
      /** 定义是否将运行文档宏以及可用的宏设置。默认值为true。 */
      macros?: Boolean,
      /** 定义是否将运行文档宏。默认值为original。 */
      macrosMode?: "warn" | "disable" | "enable",
      /** 定义是否将启动插件并可用。默认值为true。 */
      plugins?: Boolean,
      /** 定义在加载编辑器时是否自动显示或隐藏审阅更改面板。默认值为false。 */
      showReviewChanges?: Boolean,
      /** 定义在加载编辑器时是否自动打开或关闭拼写检查器。默认值为true。 */
      spellcheck?: Boolean,
      /** 定义是突出显示顶部工具栏选项卡样式。默认值为false。 */
      toolbarNoTabs?: false,
      /** 定义在标尺和对话框中使用的度量单位。默认值为厘米（cm）。 */
      unit?: "cm" | "pt" | "inch",
      /** 定义以百分比为单位的文档显示缩放值。默认值为100。 */
      zoom?: Number,
      /** 定义“打开文件位置”菜单按钮和右上角按钮的设置。 */
      goback?: {
        /** 在新的浏览器选项卡/窗口（如果值设置为true）或当前选项卡（如果值设置为false）中打开网站。默认值为true。 */
        blank?: Boolean,
        /** 定义如果单击“打开文件位置”按钮，则调用events.onRequestClose事件，而不是打开浏览器选项卡或窗口。默认值为false。 */
        requestClose?: Boolean,
        /** 将在“打开文件位置”菜单按钮和右上角按钮上显示的文本。 */
        text?: "Open file location",
        /** 单击“打开文件位置”菜单按钮时将打开的网站地址的绝对URL。 */
        url?: String
      }
    },
    /** 用户信息 */
    user: {
      /** 用户ID */
      id: string,
      /** 用户姓名 */
      name: string,
      /** 用户头像URL */
      image?: string
    }
  }
}

###最小配置

config: {
        document: {
          key: "87898661fzhangsan",
          fileType: "docx",
          title: "testdocName",
          url: "http://XXXXX.docx"
        },
        documentServerUrl: "http://10.254.24.12:8080",
        documentType: "word",
        editorConfig: {
          //回调地址，当点击保存时触发，wjbh为数据库的文件标识，可以在回调方法中做业务处理，回调程序的服务器必须能访问到文件服务器
          callbackUrl: "http://ip:port/path",
          //mode: view,//查看模式
          mode: "edit",//编辑模式
          user: { //用户信息
            id: "21111111", //用户ID
            name: "田七" //用户全名称
          }
        }
      }