各种格式文件预览
pdf文件
<embed:src="文件的地址" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
图片
<img :src="文件的地址" style="width: 100%;height: 100%;object-fit: contain;display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);" :οnlοad="加载成功返回">
txt
// 这属于一个通用的预览方式,可以预览多种格式的文件
<iframe :src="文件的地址" width='100%' height='100%' frameborder='1' ></iframe>
docx(安装 vue-office/docx)docx文件预览 | vue-office
<vue-office-docx :src="文件的地址" style="width: 100%;height: 100%;" @rendered="加载成功返回" />
xlsx(安装 vue-office/xlsx)xlsx文件预览 | vue-office
<vue-office-excel :src="文件的地址" style="width: 100%;height: 100%;" @rendered="加载成功返回" />
视频 安装-ckplayer
// 调用
<shipinyulan :videoPath="文件的地址" @ReturnData="ReturnData" />
<!--* @Description: 视频预览文件
-->
<template><div class="playerContainer" ref="playerContainer"></div>
</template>
<script>
import { onMounted, onUnmounted, ref, watch } from 'vue'export default {props: {videoPath: {type: String,required: true}},setup (props, ctx) {const playerContainer = ref(null)let playerInstance = nullonMounted(() => {initPlayer()})watch(() => props.videoPath, () => {// 当路径变化时重新播放新视频playerInstance && initPlayer()})onUnmounted(() => {// 销毁播放器实例playerInstance && playerInstance.remove()})const initPlayer = () => {// 创建CKPlayer实例playerInstance = new ckplayer({container: playerContainer.value,autoplay: true, // 是否自动播放video: props.videoPath})playerInstance.duration(function (t) {// t=当前视频总时间console.log('当前视频总时间-----')console.log(t)ctx.emit('ReturnData', t)})playerInstance.time(function (t) {// t=当前播放时间console.log('当前播放时间-----')console.log(t)ctx.emit('ReturnData', t)})playerInstance.ended(function () {// 视频播放已结束console.log('视频播放已结束')ctx.emit('ReturnData', false)})playerInstance.error(function (obj) {// 监听到错误,obj=错误内容console.log('监听到错误-----')console.log(obj)ctx.emit('ReturnData', obj)})}return {playerContainer}}
}
</script>
<style scoped>
.card-header {text-align: center;border-bottom: 2px dotted #c5c5c5;
}.playerContainer {width: 100%;height: 100%;overflow: hidden;}
</style>
相关文章:

各种格式文件预览
pdf文件 <embed:src"文件的地址" style"position:absolute; left: 0; top: 0;" width"100%" height"100%" type"application/pdf"> 图片 <img :src"文件的地址" style"width: 100%;height: 100%;ob…...

21款奔驰GLE350升级迈巴赫电动踏板 上下车更加方便
奔驰GLE级车型原厂都没有电动踏板,都是固定踏板,或者没有踏板。这次安装的迈巴赫款式电动踏板是副厂的,虽然是副厂,但是脚下面积大,外观整洁大气,非常适合GLE。...

【Android】Lombok for Android Studio 离线插件
下载地址 https://plugins.jetbrains.com/plugin/6317-lombok/versions/stable 安装方法 File - Settings - Plugins - 设置按钮 - Install Plugin from Disk - 选择插件包 添加依赖 //Lombokapi org.projectlombok:lombok:1.18.30annotationProcessor org.projectlombok:l…...

在Docker中设置Redis的密码
目录 1,介绍2,实现“Docker Redis设置密码”的整体流程3,具体实现步骤4,结论 1,介绍 Docker是一个开源的应用容器引擎,可以自动化部署、扩展应用程序。它可以帮助开发人员将应用程序及其依赖项打包到一个可…...

C++跨模块传递CRT引发问题
SDK新增加了一个接口,参数使用std::vector<Class>&,传给dll函数中填充数值,然后应用层拿到这个vector出现了崩溃 越界等问题,调了很久,之前知道这个问题,没有想起来,耽误了许多时间。…...

常用的国外邮箱服务有哪些?
邮箱作为现代生活中不可或缺的一部分,不仅用于收发邮件,还被广泛应用于各种重要的在线操作,如注册账号、查找密码等。在国外,人们使用各种各样的电子邮件,每种电子邮件都有其独特的特点和功能。本篇文章将详细介绍国外…...

windows cmake x86 x64 下载与安装
cmake 下载路径:cmake 下载选择: 界面下拉选取适合自己的版本 这里是windows x86 x64 (x86是32位系统;x64是64位系统) 安装: 点击安装。 此处选择添加环境变量 命令提示符 验证查看 cmake 桌面可以…...

目标检测算法 - YOLOv1
文章目录 1. 作者简介2. 目标检测综述3. YOLOv1算法3.1 预测阶段3.2 预测阶段后处理3.3 训练阶段 YOLO的全称是you only look once,指只需要浏览一次就可以识别出图中的物体的类别和位置。 YOLO是目标检测模型。目标检测是计算机视觉中比较简单的任务,用…...

Mercury性能测试模板
xxxxxxxxxx 性能测试报告 2023年11月8日 目 录 1 前言 1 1第一章XXXXXXXX核心业务系统性能测试概述 1 1.1 被测系统定义 1 1.1.1 功能简介 1 1.1.2 性能测试指标 2 1.2 系统结构及流程 2 1.2.1 系统总体结构 2 1.2.2 功能模块描述 3 1.2.3 业务…...

ts面试题总结
文章目录 前言ts和js的区别?什么是Typescript的方法重载?Typescript中never 和 void 的区别?typescript 中的 is 关键字有什么用?TypeScript支持的访问修饰符有哪些?如何定义一个数组,它的元素可能是字符串…...

访问控制列表
目录 ACL ACL原理 ACL包过滤方式 ACL通用命令 查看ACL表命令 删除整张表命令 接口配置ACL ACL分类 标准ACL 标准ACL的动作与条件 通配符掩码 扩展ACL 扩展ACL的动作与条件 命名ACL 前言 书写方式 ACL 含义:访问控制列表,其是一种包过滤…...

java入坑之类加载器
一、类加载机制 1.1类加载过程 类加载是Java虚拟机将类的字节码数据从磁盘或网络中读入内存,并转换成在JVM中可以被执行的Java类型的过程。类加载器是Java虚拟机的重要组成部分,负责加载和解析类的字节码,将其转换成Java虚拟机中的类对象&am…...

登录Tomcat控制台,账号密码输入正确但点击登录没反应不跳转到控制台页面
在tomcat-users.xml里面可以查看登录tomcat控制台的账号密码,如果账号密码输入正确还是登录不进去,则很有可能是tomcat的账号被锁了(可在catalina.xxx.log里面查看)。tomcat账号被锁定后默认情况是不访问控制台后5分钟自动解锁&am…...

[黑马程序员Pandas教程]——Pandas缺失值处理
目录: 学习目标空值和缺失值查看缺失值 加载数据并通过info函数初步查看缺失值情况df.isnull().sum()空值数量统计Missingno库对缺失值的情况进行可视化探查 安装missingno库missingno.bar(df)缺失值数量可视化missingno.matrix(df)缺失值位置的可视化missingno.he…...

Mysql进阶-视图篇
介绍 视图(View)是一种虚拟存在的表。视图中的数据并不在数据库中实际存在,行和列数据来自定义视图的查询中使用的表,并且是在使用视图时动态生成的。 通俗的讲,视图只保存了查询的SQL逻辑,不保存查询结果。…...

一种libuv实现websockets服务的解决方案
方法是libuv用多事件循环来驱动。说起来容易,做起来还是比下面的方法更容易: 上图是某位网友的方法代表子大部分网络资料。此方法对部署不友好,因为软件仓库提供的libwebsockets是不能用了。如何简化部署,利用好现有的软件仓库呢&…...

MobaXterm配置SSHTunnel
本地与远程服务器之间存在防火墙,防火墙只允许SSH端口通过,为访问远程服务器,我们可以借助MobaXterm来与SSH服务器建立隧道,使得防火墙外的用户能够访问远程服务器 配置 打开SSHTunnel 新建SSH tunnel 点击开启就生效了&…...

MySQL中的datetime和timestamp有什么区别
相同点: 存储格式相同 datetime和timestamp两者的时间格式都是YYYY-MM-DD HH:MM:SS 不同点: 存储范围不同. datetime的范围是1000-01-01到9999-12-31. 而timestamp是从1970-01-01到2038-01-19, 即后者的时间范围很小. 与时区关系. datetime是存储服务器当前的时区. 而timesta…...

如何开发一个求职招聘小程序?详细步骤解析与教程
一、确定需求和功能 在开发求职招聘小程序之前,需要明确需求和功能。通过对市场和用户需求的调研和分析,确定小程序需要具备哪些功能,如职位发布、简历投递、在线沟通、面试安排等。 二、选择开发方式 求职招聘小程序的开发方式有多种选择…...

安克创新音频算法工程师(应届生)招聘
职位描述: 负责音频处理算法的研发和优化,包括但不限于噪声抑制、回声消除、声反馈抑制、音效、声纹、唤醒、指令词识别等。 持续跟进国际前沿技术方向,预研端侧可落地的音频技术,打造技术影响力。 对音频处理系统进行模拟和实验…...

Ubuntu 22.04.3 LTS中安装singularity
文章目录 概要背景知识什么是singularity ? 安装流程1. 安装Go2. 下载Singularity3. 编译Singularity源代码 4. 验证安装是否成功singularity的使用安装open structure 小结 概要 这里主要记录singularity的安装和使用,安装过程中会出现相关的错误,所以…...

NVM安装node后提示没有对应npm包(即:无法将“npm”项识别为 cmdlet、函数、脚本文件)
背景 windows11 node版本降低到v12.22.12后,执行:nvm -v npm -v npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果 包括路径,请确保路径正确,然后再试一次。 所在位置 …...

路由器基础(十一):ACL 配置
访问控制列表 (Access Control List,ACL) 是目前使用最多的访问控制实现技术。访问控制列表是路由器接口的指令列表,用来控制端口进出的数据包。ACL适用于所有的被路由协议,如IP、IPX、AppleTalk 等。访问控制列表可以分为基本访问控制列表和高级访问控制…...

【今日文章】:如何用css 实现星空效果
【今日文章】:如何用css 实现星空效果 需求实现tips: 需求 用CSS 实现星空效果的需求: 屏幕上有“星星”,且向上移动。移动的时候,动画效果要连贯,不能出现闪一下的样子。 实现 这里我们需要知道,“星星”是…...

HackTheBox-Starting Point--Tier 1---Three
文章目录 一 题目二 实验过程 一 题目 Tags Web、Cloud、Custom Applications、AWS、AWS、Reconnaissance、Web Site Structure Discovery、Bucket Enumeration、Arbitrary File Upload、Anonymous/Guest Access译文:Web、云、定制应用程序、AWS、AWS、侦察、网站…...

Linux Alsa声卡驱动(2):Machine驱动
一:Simple Card Simple Card是ASoC通用的machine driver,可支持大部分标准声卡。 驱动:kernel/sound/soc/generic/simple-card.c compatible = "simple-audio-card"; 1、设备树属性 (1)协议 属性协议格式描述simple-audio-card,format i2si2s标准格式right_j…...

某综合性能源集团绩效考核设计项目纪实
——设置分层分类的考核指标、建立多维度评价体系,增加考核结果信服力 【客户行业】能源行业 【问题类型】薪酬管理 【客户背景】 某综合性能源跨国集团是一家专注于能源加工行业的民营跨国企业,业务覆盖能源工程建设、高端装备制造、能源勘探开发、专…...

ubuntu18.04 通过创建服务实现开机自启, 启动指定脚本
下面是具体的操作过程 切换目录到root cd /root/ 新建一个脚本 vi myscript.sh 添加内容:设置指定网卡的ip地址 (这里根据自己需要修改) #!/bin/bash ifconfig enp0s3 10.20.60.113 赋予执行权限 chmod x myscript.sh 新建一个服务 vi /etc/systemd/system/myscr…...

Tomcat 9.0.x 源码编译
文章目录 一、克隆源码二、构建 Maven1)在项目根目录中新建 pom.xml 文件2)然后 Add Maven Projects 三、在目录中增加 home 目录四、增加启动配置五、其它问题1)控制台乱码解决 2)启动后访问 localhost:8080 报错解决 一、克隆源…...

基于SSM的旅游管理系统的设计与实现
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…...