安裝doccument server
使用docker安裝比較簡單：docker run -i -t -d -p 9002:80 onlyoffice/documentserver
這裏安裝在了9002端口, 安裝完成後可以通過 http://192.168.1.22:9002 查看是否訪問成功，這裏的192.168.1.22是docker服務器地址。
引入js文件
<script src="http://192.168.1.22:9002/web-apps/apps/api/documents/api.js"></script>參考api編寫預覽方法
詳細配置文檔：https://api.onlyoffice.com/editors/config/
示例文件如下：
<html lang="zh-CN">
<head>
<title>Demo</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta charset="utf-8"/>
<!-- onlyoffice服務器地址 -->
<script src="http://192.168.200.76:9002/web-apps/apps/api/documents/api.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- 佔位元素 -->
<div id="placeholder"></div>
<script>
/**
* 詳細配置文檔：https://api.onlyoffice.com/editors/config/
* @param url 要預覽的文檔地址
* @param filename 要預覽的文檔文件名
*/
function preview() {
let filename = "123.docx"
let url = "http://192.168.1.3000:5100/123.docx"
const config = {
"document": {
"permissions": {
comment: false,
fillForms: false,
"edit": false,
},
"fileType": "docx",
"title": filename,
"url": url,
// "key": this.md5,
"lang": "zh-CN"
},
"width": '100%',
"editorConfig": {
mode: 'view',
"lang": "zh-CN"
}
};
document.title = filename;
const docEditor = new DocsAPI.DocEditor("placeholder", config);
}
// 調用方法
preview();
</script>
</body>
</html>效果還不錯。
