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

news2024/11/24 14:30:14

众所周知啊,在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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/766240.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3中使用Vue.Draggable的clone模式及遇到的坑

最近有个需求是从左边一个列表中&#xff0c;拖动列表元素到右边列表中&#xff0c;并且不是移动拖拽&#xff0c;而是复制拖拽&#xff0c;元素在右边列表中可以重复&#xff0c;比如左边是参加某个游戏的队员名单&#xff0c;右边是出场顺序&#xff0c;队员可以重复上场。类…

网络运维工作是什么的?

互联网运维工作&#xff0c;以服务为中心&#xff0c;以稳定、安全、高效为三个基本点&#xff0c;确保公司的互联网业务能够 724 小时为用户提供高质量的服务。 运维人员对公司互联网业务所依赖的基础设施、基础服务、线上业务进行稳定性加强&#xff0c;进行日常巡检发现服务…

【数学建模】数据预处理

在数学建模赛题中&#xff0c;官方给所有选手的数据可能受到主观或客观条件的影响有一定的问题&#xff0c;如果不进行数据的处理而直接使用的话可能对最终的结果造成一定的影响&#xff0c;因此为了保证数据的真实性和建模结果的可靠性&#xff0c;需要在建模之前对数据进行相…

VS工程项目中属性中无Qt设置问题解决方案

VS工程项目中属性中无Qt设置问题解决方案 若VS工程中&#xff0c;创建的是Qt工程&#xff0c;或者从Qt Creator工程转换为VS 工程时&#xff0c;VS项目属性中确无Qt Project Setttings等设置时&#xff0c;可通过如下方案解决 1. 右键项目&#xff0c;在下拉框中选择Qt项 2.…

微信号长时间不用会被腾讯回收

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 估计很多人不知道的一个冷知识&#xff1a;你的微信号并不归你本人所有&#xff0c;你只有账号的使用权&#xff0c;微信账号的所有权归腾讯公司所有。如果长期不使用&#xff0c;或者是违规&#…

MySQL—创建和管理表(六)

1.数据库相关操作 -- 1 创建数据库 -- 1.1 创建一个保存员工信息的数据库 CREATE DATABASE employees; -- 1.2 其他相关指令 -- 1.2.1 查看当前所有数据库 SHOW DATABASES; -- 1.2.2 “使用”一个数据库&#xff0c;使其作为当前数据库 USE employees;-- 2 命名规则 -- 见ppt …

虹科分享 | MACsec-先进的车载网络安全解决方案

Media Access Control Security&#xff08;简称 MACsec&#xff09;是以太网上最先进的安全解决方案。它为以太网上传输的几乎所有帧提供完整性保护、重放保护和可选的机密性保护。与其他解决方案相比&#xff0c;包括了单播、组播和广播消息以及在第2层上运行的所有协议。 M…

3D虚拟展厅和VR全景展厅该如何选择

导言&#xff1a; 在当今数字化时代&#xff0c;传统展厅已逐渐演变为3D虚拟展厅和VR全景展厅。这些技术的广泛应用为企业带来了全新的营销和展示方式。 一&#xff0e;3D虚拟展厅的特点和优势 3D虚拟展厅是一种基于3D技术的虚拟展示空间&#xff0c;通过计算机图像和模拟技术…

【C语言进阶(九)】常见内存错误以及柔性数组

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C语言学习分享⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C语言知识   &#x1f51d;&#x1f51d; 常见内存错误 1. 前言2. 对NULL指针…

伦敦银价格一览表

一目均衡表&#xff08;Ichimoku Kinko Hyo&#xff09;是日本在二次大战前发明的行情分析方法&#xff0c;是全世界技术分析的鼻祖&#xff0c;其功能是提供市场的方向及入市位&#xff0c;被广泛应用于股市、债市和贵金属市场之中。日文KINKO的意思为时空平衡点&#xff0c;H…

Blueprint —— 入门笔记2

BP_Character Animation BlueprintBlend Space 1D 角色按键动画 命令slomo 0.1减慢时间&#xff0c;用于测试&#xff1b; 玩家输入&#xff1a;位移、旋转、缩放&#xff1b; 碰撞检测&#xff1a;执行动作等&#xff1b; 游戏开始 地图&#xff0c;开始游戏页面 打开地图 输入…

用于视觉跟踪的在线特征选择研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

如何在Appium中使用AI定位

当我们在写自动化测试脚本的时候&#xff0c;传统情况下一定要知道元素的属性&#xff0c;如id、name、class等。那么通过AI的方式定位元素可能就不需要知道元素的属性&#xff0c;评价人对元素的判断来定位&#xff0c;比如&#xff0c;看到一个搜索框&#xff0c;直接使用ai:…

Tomcat安装及配置教程(IDEA整合Tomcat)

目录 友情提醒第一章、Tomcat下载与安装1.1&#xff09;Tomcat介绍1.2&#xff09;官网下载 第二章、Tomcat配置环境变量2.1&#xff09;windows环境变量配置2.2&#xff09;验证Tomcat配置是否成功2.3&#xff09;报错解决 第三章、IDEA整合Tomcat3.1&#xff09;打开IDEA开发…

11.Ceph 对象存储系统 RGW 接口

文章目录 Ceph 对象存储系统 RGW 接口概念逻辑单位创建RGW接口开启httphttps创建RadosGW账户S3接口访问测试 Ceph 对象存储系统 RGW 接口 概念 对象存储&#xff08;object storage&#xff09;是非结构数据的存储方法&#xff0c;对象存储中每一条数据都作为单独的对象存储&…

资深测试总结,自动化测试-JSON+YAML+CSV+Excel数据驱动(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 数据驱动 在自动…

三分钟为你揭晓什么软件可以音频转文字

在一个繁忙的国际会议上&#xff0c;艾丽莎是一位积极参与的会议记录员。她负责记录并整理与会者的发言内容&#xff0c;以便后续审阅和分析。然而&#xff0c;由于会议中使用英语进行交流&#xff0c;艾丽莎常常面对着大量的英文音频文件&#xff0c;需要将这些音频转换为文字…

C# 连接mysql数据库报错:Character set ‘utf8mb3‘ is not supported by .Net Framework.

最近项目突然连接mysql数据库出现一个bug&#xff0c;排查了半小时&#xff0c;最后更新MySql.Data版本解决了&#xff0c;错误信息如下&#xff1a; System.NotSupportedException: Character set utf8mb3 is not supported by .Net Framework.在 MySql.Data.MySqlClient.Cha…

C#List转IList方法

最近工作中使用到了C#的List和IList。 这里参考百度上的资料&#xff0c;总结一下。 IList使用命名空间&#xff1a; using System.Collections; List<T>类:表示可通过索引访问的对象的强类型列表&#xff0c;提供用于对列表进行搜索、排序和操作的方法。 IList<T&…

思维导图软件哪个好?试用百款导图软件只留下这15个

​思维导图软件哪个好&#xff1f; 这是许多第一次使用思维导图软件的朋友无法回避的问题&#xff0c;看着眼前有数百款思维导图软件&#xff0c;数量多到让人患上选择困难症&#xff0c;不知道要选哪个导图软件好&#xff0c;这就好比在繁星点点的夜空中寻找属于自己的那颗星&…