OnlyOffice 实现 EXCEL 预览功能

时间 2019/11/23 16:48:17 加载中...

EXCEL的预览功能

需求:将 EXCEL 上传到服务器后,用户可以在线预览 EXCEL

技术选择:

方案一:使用微软

使用微软开放的预览功能,如下:

https://view.officeapps.live.com/op/view.aspx?src=文件地址

在 src 后面添加上要预览的文件地址即可。且文件地址是可以在网络上访问的,内网肯定是不行的。且网速要好。

类型 示例地址 是否支持
EXCEL https://view.officeapps.live.com/op/view.aspx?src=http://www.sqber.com/1.xlsx
WORD https://view.officeapps.live.com/op/view.aspx?src=http://www.sqber.com/%E4%BD%BF%E7%94%A8%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8A%9E%E5%85%AC.docx
PowerPoint https://view.officeapps.live.com/op/view.aspx?src=http://www.sqber.com/TPI65介绍.ppt
PDF https://view.officeapps.live.com/op/view.aspx?src=http://www.sqber.com/使用团队协作办公.pdf

缺点

内网环境必须能联接互联网,且 PDF 不可预览。

方案二:使用 onlyoffice

onlyoffice 目前 EXCEL,WORD,PowerPoint,PDF 都可以预览。
但 onlyoffice 需要在内网部署。

部署步骤

1、在一台 CentOS 上先安装 Docker

  1. sudo yum install -y yum-utils device-mapper-persistent-data lvm2
  2. sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
  3. sudo yum -y install docker-ce docker-ce-cli containerd.io
  4. sudo systemctl start docker
  5. sudo systemctl enable docker

2、运行 onlyoffice 镜像

  1. /*加速*/
  2. curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io
  3. systemctl restart docker
  4. sudo docker run -i -t -d -p 91:80 --restart=always onlyoffice/documentserver

3、打开端口

  1. firewall-cmd --query-port=91/tcp
  2. firewall-cmd --add-port=91/tcp --permanent
  3. 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、初始化并配置要展示的文件

  1. var docEditor;
  2. var platform = "desktop";//浏览平台
  3. 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))){
  4. if(window.location.href.indexOf("?mobile")<0){
  5. try{
  6. if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
  7. platform = "mobile";
  8. }
  9. }catch(e){}
  10. }
  11. }
  12. var config = {
  13. "type": "desktop",
  14. "documentType": "text", //文档类-text、表格类-spreadsheet、ppt类-presentation
  15. "document": {
  16. "title": "123",
  17. //"url": "http://www.sqber.com/1.xlsx",
  18. //"url": "https://shencase.oss-cn-shanghai.aliyuncs.com/TPI65%E4%BB%8B%E7%BB%8D.ppt",
  19. "url":"http://www.sqber.com/使用团队协作办公.pdf",
  20. //"fileType": "xlsx",
  21. "fileType": "pdf",
  22. "key": null
  23. },
  24. "editorConfig": {
  25. "mode": "view",
  26. "callbackUrl": "",
  27. "user": {
  28. "id": "",
  29. "name": ""
  30. },
  31. "customization": {
  32. "goback": {
  33. "url": null
  34. }
  35. },
  36. "embedded": null,
  37. "lang": "zh-CN"
  38. },
  39. "token": null
  40. };
  41. config.type = platform;
  42. 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: 文件类型

主要是这些配置,可以自己来测试一些文件。

完。

参考

https://www.jianshu.com/p/5e92b03f6d6c

扫码分享
版权说明
作者:SQBER
文章来源:http://www.sqber.com/articles/onlyoffice-preview-excel.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。