文件打开流程
要在浏览器打开一个office文件，需要经过以下步骤
- 指定文件下载路径和文件类型(word,ppt,excel)并通过JavascriptApi调用document server相关接口
- document server会在后台将文件下载好并将文件转换为
Office Open XML格式，这是一种基于XML的通用文档格式 - document server会将文档转换为前端可展示的形式（canvas）
- 前端文档编辑器显示文档内容
实践
这里我们准备了一个样例文档并放到线上，这个样例文档也是onlyoffice官方使用的样例word文档。
创建页面
本地创建一个html页面，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onlyoffice教程</title>
</head>
<body>
<div id="placeholder"></div>
<script type="text/javascript" src="http://47.113.219.133:9001/web-apps/apps/api/documents/api.js"></script>
<script>
var docEditor = new DocsAPI.DocEditor("placeholder", {
"document": {
"fileType": "doc",
"permissions": {
"edit": true,
},
"key": "100000",
"title": "测试页面.docx",
"url": "https://zhengjianfeng.cn/document/example.docx",
},
"height": "800px",
"width": "100%"
});
</script>
</body>
</html><div id="placeholder"></div>指定文档编辑器所在的区域http://47.113.219.133:9001/web-apps/apps/api/documents/api.js是documentserver的javascript api- document.fileType必须指定文档类型
- key：可以为文档指定一个主键，后台会根据这个主键做缓存，在实施时最好将文档编号作为key
- url：文档路径，后台会根据该路径进行下载转换
- height：指定文档编辑器高度
- width：指定文档编辑器宽度
如果一切顺利，你可以看到以下页面
汉化
编辑器默认语言是英文，官方是支持中文，可以修改代码增加中文支持
<script>
var docEditor = new DocsAPI.DocEditor("placeholder", {
...
"editorConfig":{
"lang":"zh-CN"
}
});
</script>可以在js中配置editorConfig指定语言
用户信息
在文档打开时会弹出一个提示框（英文，无法汉化）提示我们执行用户名，这是因为我们没有指定打开文档的用户，onlyoffice认为我们是匿名者，需要指定名称
修改代码如下
<script>
var docEditor = new DocsAPI.DocEditor("placeholder", {
...
"editorConfig":{
"lang":"zh-CN",
"user":{
"group":"admin",
"id":"004",
"name":"郑剑峰"
}
}
});
</script>这样在编辑器的右上角就可以显示当前用户信息，当然在生产中，这里需要做好权限控制，不然容易导致安全问题
其他配置
编辑器提供了非常丰富的配置，大家可以自行参考官方文档
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。