OnlyOffice 实现 EXCEL 预览功能
EXCEL的预览功能
需求:将 EXCEL 上传到服务器后,用户可以在线预览 EXCEL
技术选择:
方案一:使用微软
使用微软开放的预览功能,如下:
https://view.officeapps.live.com/op/view.aspx?src=文件地址
在 src 后面添加上要预览的文件地址即可。且文件地址是可以在网络上访问的,内网肯定是不行的。且网速要好。
缺点
内网环境必须能联接互联网,且 PDF 不可预览。
方案二:使用 onlyoffice
onlyoffice 目前 EXCEL,WORD,PowerPoint,PDF 都可以预览。
但 onlyoffice 需要在内网部署。
部署步骤
1、在一台 CentOS 上先安装 Docker
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
sudo yum -y install docker-ce docker-ce-cli containerd.io
sudo systemctl start docker
sudo systemctl enable docker
2、运行 onlyoffice 镜像
/*加速*/
curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io
systemctl restart docker
sudo docker run -i -t -d -p 91:80 --restart=always onlyoffice/documentserver
3、打开端口
firewall-cmd --query-port=91/tcp
firewall-cmd --add-port=91/tcp --permanent
systemctl restart firewalld
我是用的是 91 端口,CentOS 地址是 192.168.163.138
所以安装完毕后,打开 http://192.168.163.138:91 即可。会自动跳转到 http://192.168.163.138:91/welcome/
刚打开会提示 502 Bad Gateway 稍后打开就会正常了。
效果如下:
自己项目中使用 onlyoffice
在自己项目中使用 onlyoffice 的方法如下:
1、引入 js
<script type="text/javascript" src="http://192.168.163.138//web-apps/apps/api/documents/api.js"></script>
上面的 IP 地址就是部署的 onlyoffice 地址。
2、在页面放占位符
<div id="placeholder"></div>
3、初始化并配置要展示的文件
var docEditor;
var platform = "desktop";//浏览平台
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
platform = "mobile";
}
}catch(e){}
}
}
var config = {
"type": "desktop",
"documentType": "text", //文档类-text、表格类-spreadsheet、ppt类-presentation
"document": {
"title": "123",
//"url": "http://www.sqber.com/1.xlsx",
//"url": "https://shencase.oss-cn-shanghai.aliyuncs.com/TPI65%E4%BB%8B%E7%BB%8D.ppt",
"url":"http://www.sqber.com/使用团队协作办公.pdf",
//"fileType": "xlsx",
"fileType": "pdf",
"key": null
},
"editorConfig": {
"mode": "view",
"callbackUrl": "",
"user": {
"id": "",
"name": ""
},
"customization": {
"goback": {
"url": null
}
},
"embedded": null,
"lang": "zh-CN"
},
"token": null
};
config.type = platform;
docEditor = new DocsAPI.DocEditor("placeholder", config);
重点是上面的 config 配置。
documentType: 文档类型,值可选为 text、spreadsheet、presentation。
text 对应的文件类型有 .doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fodt, .htm, .html, .mht, .odt, .ott, .pdf, .rtf, .txt, .djvu, .xps
spreadsheet 对应的文件类型有 .csv, .fods, .ods, .ots, .xls, .xlsm, .xlsx, .xlt, .xltm, .xltx
presentation 对应的文件类型有 .fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx
document - title: 标题
document - url: 要展示的文件的地址(onlyoffice一定要能访问到)
document - fileType: 文件类型
主要是这些配置,可以自己来测试一些文件。
完。
*昵称:
*邮箱:
个人站点:
*想说的话: