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-打开文件_第1张图片

汉化

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

可以在js中配置editorConfig指定语言

onlyoffice教程0x03-打开文件_第2张图片

用户信息

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

onlyoffice教程0x03-打开文件_第3张图片

修改代码如下

这样在编辑器的右上角就可以显示当前用户信息,当然在生产中,这里需要做好权限控制,不然容易导致安全问题

onlyoffice教程0x03-打开文件_第4张图片

其他配置

编辑器提供了非常丰富的配置,大家可以自行参考官方文档

你可能感兴趣的:(office)