onlyoffice教程0x03-打开文件

文件打开流程 要在浏览器打开一个office文件,需要经过以下步骤

  • 指定文件下载路径和文件类型(word,ppt,excel)并通过JavascriptApi调用document server相关接口
  • document server会在后台将文件下载好并将文件转换为 Office Open XML格式,这是一种基于XML的通用文档格式
  • document server会将文档转换为前端可展示的形式(canvas)
  • 前端文档编辑器显示文档内容
实践 这里我们准备了一个样例文档并放到线上,这个样例文档也是onlyoffice官方使用的样例word文档。
创建页面 本地创建一个html页面,代码如下
onlyoffice教程 - 锐客网

  • 指定文档编辑器所在的区域
  • http://47.113.219.133:9001/web-apps/apps/api/documents/api.js是documentserver的javascript api
  • document.fileType必须指定文档类型
  • key:可以为文档指定一个主键,后台会根据这个主键做缓存,在实施时最好将文档编号作为key
  • url:文档路径,后台会根据该路径进行下载转换
  • height:指定文档编辑器高度
  • width:指定文档编辑器宽度
如果一切顺利,你可以看到以下页面
onlyoffice教程0x03-打开文件
文章图片

汉化 编辑器默认语言是英文,官方是支持中文,可以修改代码增加中文支持

可以在js中配置editorConfig指定语言
【onlyoffice教程0x03-打开文件】onlyoffice教程0x03-打开文件
文章图片

用户信息 在文档打开时会弹出一个提示框(英文,无法汉化)提示我们执行用户名,这是因为我们没有指定打开文档的用户,onlyoffice认为我们是匿名者,需要指定名称
onlyoffice教程0x03-打开文件
文章图片

修改代码如下

这样在编辑器的右上角就可以显示当前用户信息,当然在生产中,这里需要做好权限控制,不然容易导致安全问题
onlyoffice教程0x03-打开文件
文章图片

其他配置 编辑器提供了非常丰富的配置,大家可以自行参考官方文档
  • 文档配置
  • 文档信息配置
  • 文档权限配置
  • 编辑器配置
  • 自定义配置
  • 嵌入文档配置
  • 插件配置
  • 事件配置
  • api
  • 回调函数处理

    推荐阅读