众所周知啊,在web浏览器中是无法直接预览Excel、world文档等文件的,PDF有的浏览器是打开预览,有的浏览器是跳转到下载页,行为不一致也是让开发者头疼的事情。

今天给大家提供一个解决方案,实现office文件在线预览的解决方案,这个在开发OA,推送通知触达的应用非常有用。借助插件——onlyoffice实现在线预览功能!

操作环境:centOS + 宝塔面板

第一步、下载docker

在宝塔面板的【软件商店】中查找应用docker,安装docker跟docker管理器,并将它放置在面板首页。这样我们就可以在面板首页找到docker管理器了。

第二步、安装onlyoffice镜像

在宝塔首页点击Docker管理器,在官方镜像仓库中搜索并安装 documentServer。

拉取完毕之后在你的docker镜像中就能找到onlyoffice镜像了。

我们通过命令docker inspect [images_id],看到该镜像暴露了一个80端口。这是用于镜像访问的端口,我们启动容器的时候做好端口映射就能成功访问了。

 第三步、启动容器

可在命令行中,通过命令:

docker run -it --name documentServer -d -p 9090:80 onlyoffice/documentserver

其中,-it表示使用交互式终端,ubuntu是基础镜像,bash则是要执行的命令。当我们运行这条命令时,Docker会自动为我们创建一个容器,并在其中开启一个bash终端。此时,我们就可以在容器中运行各种bash命令,这对于需要交互式操作的用户来说非常方便。

-d选项表示让Docker以守护进程方式运行容器。在我们使用-d选项时,Docker会把容器放到后台执行

-p表示端口映射,我们将本机的9090端口(可随你指定),映射到onlyoffice镜像的80端口

启动成功之后会返回一个容器ID

第四步、测试onlyoffice

访问localhost:9090,如果出现了一下画面那么onlyoffice服务已经启动成功!

启动成功之后会提供一个js文件,通过http://localhost:9090/web-apps/apps/api/documents/api.js 访问,前端引用该文件做好配置即可在线预览office文件。

第五步、前端调用服务

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><body>
<div id="placeholder"></div>
<script type="text/javascript" src="http://localhost:9090/web-apps/apps/api/documents/api.js"></script>
<script>var docEditor = new DocsAPI.DocEditor("placeholder", {"document": {"fileType": "docx","permissions": {"edit": false,},"key": "C8D7FB890BAC496FB0D27B163EDB88BDAA","title": "zf张飞.docx","url": "你需要预览的文件地址",},"height": "1000px","width": "100%"});</script>
</body>
</html>

至此,已经可在线预览了。

onlyoffice  git地址:https://github.com/ONLYOFFICE/DocumentServer

web浏览器在线预览Excel,PDF,world文档解决方案相关推荐

  1. WEB前端实现在线预览、编辑Office文档

    这篇文章介绍如何在web前端引入JS插件实现在线预览.编辑Office文档. 使用插件:Spire.Cloud在线Office文档编辑器(官网:冰蓝科技在线编辑) 重点:该方案仅需浏览器支持HTML5 ...

  2. vue如何在线预览及下载word文档

    最近遇到个需求,说要在线预览及下载word文档,尝试了很多方法以后,发现有一个方法是比较好用的,故来分享一波,希望大家也可以在评论中告知更多实现的方法~ https://view.officeapps ...

  3. Word,Excel,PPT等Office文件Web浏览器在线预览

    博主联系方式   https://fizzz.blog.csdn.net/article/details/113049879 前两天接到一个需求:需要在线预览用户上传的Word,Excel,PPT文档 ...

  4. .net oss存储 oss api接口开发 office文档上传在线预览oss存储 office文档上传oss 阿里云oss接口开发

    word在线预览api接口 office在线预览接口 word转图片 ppt在线预览 excel在线预览 预览支持的文件格式:word(doc,docx),excel(xls,xlsx),ppt(pp ...

  5. wps在线预览接口_金山文档在线编辑 - 快速接入 - 《WPS开放平台技术文档》 - 书栈网 · BookStack...

    快速接入 一.申请和上线流程如下: 1.申请Appid和SecretKey 需要前往https://open.wps.cn 注册服务商,并且申请开通金山文档在线编辑服务. 2.实现回调接口 根据本文档 ...

  6. 前端实现在线预览、编辑Office文档(vue版)

    使用插件:Spire.Cloud在线Office文档编辑器(官网:冰蓝科技在线编辑) 无需安装,在 index.html 里面引入即可 重点:支持在线创建.编辑.保存和打印 Office (Word ...

  7. java word在线预览_java 生成word文档并且在线预览的问题

    富文本? 用iText或者PD4ML直接转换为pdf [code="java"] String outputFile = "D:/Test/demo_3.pdf" ...

  8. 文档转成html在线预览,java poi Word文档转为HTML文件 实现在线预览功能

    Java代码 import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; im ...

  9. 文件在线预览 图片 PDF Excel Word

    1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <ah ...

最新文章

  1. py2数据分析_利用数据
  2. 升级vue-cli为 cli3 并创建项目
  3. C++操作SQLite简明教程
  4. java面向对象语言_Java到底是不是一种纯面向对象语言?
  5. [CQOI2017] 小Q的表格(分块 + 整除分块 + 数学 + 前缀和)
  6. 闪电shader_【Shader案例】怎样做出自然的闪电
  7. servlet中实现页面跳转return “r:”和return “f:
  8. awk教程入门与实例练习(一)
  9. ORA-02266错误处理
  10. # 异运算_人教版六年级数学下册第29课数的运算(P7680)图文视频辅导
  11. [原]减小VC6编译生成的exe文件的大小
  12. 两款专业卸载软件 Revo Uninstaller Pro 专业版 + msi专业卸载工具
  13. 国赛助力:第三类边界条件热传导方程及基于三对角矩阵的数值计算MATLAB实现(2020A)
  14. 离散数学耿素云计算机,离散数学,屈婉玲,耿素云,张立昂编著_考研教材_考试点...
  15. keil4和烧录软件的基本使用
  16. mongo分片集群部署
  17. 企业进行客户关系管理的重要性是什么
  18. 照片生成3D虚拟数字人,虚拟形象主播搭建(软件+教程)
  19. 2021年「博客之星」参赛博主:尔嵘
  20. 《绿皮书》中的经典台词

热门文章

  1. django之:网页伪静态 JsonResponse form表单携带文件数据 CBV源码分析 模板语法传值 模板语法之过滤器 标签 自定义标签函数 过滤器、inclusion_tag模板的继承导入
  2. errpt DCB47997
  3. 互联网中大学生创业,互联网住家创业创业 - 知乎
  4. 苦楝花开,如果人生可以重来
  5. python正则group()与groups()用法
  6. 《穷爸爸富爸爸》 —— 罗伯特访问记录
  7. JAVA(2021-11-17)leetcode每日一题---- 最大单词长度乘积
  8. Cisco网站模块 16 - 17:构建和保护小型网络考试试题及答案
  9. RTF转HTML,HTML转TXT(Java版)
  10. [Unity3D插件]2dToolKit系列三 碰撞检测功能的实现以及障碍物的随机摆放