当前位置: 首页 > news >正文

各种格式文件预览

 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级车型原厂都没有电动踏板&#xff0c;都是固定踏板&#xff0c;或者没有踏板。这次安装的迈巴赫款式电动踏板是副厂的&#xff0c;虽然是副厂&#xff0c;但是脚下面积大&#xff0c;外观整洁大气&#xff0c;非常适合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&#xff0c;介绍2&#xff0c;实现“Docker Redis设置密码”的整体流程3&#xff0c;具体实现步骤4&#xff0c;结论 1&#xff0c;介绍 Docker是一个开源的应用容器引擎&#xff0c;可以自动化部署、扩展应用程序。它可以帮助开发人员将应用程序及其依赖项打包到一个可…...

C++跨模块传递CRT引发问题

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

常用的国外邮箱服务有哪些?

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

windows cmake x86 x64 下载与安装

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

目标检测算法 - YOLOv1

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

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的区别&#xff1f;什么是Typescript的方法重载&#xff1f;Typescript中never 和 void 的区别&#xff1f;typescript 中的 is 关键字有什么用&#xff1f;TypeScript支持的访问修饰符有哪些&#xff1f;如何定义一个数组&#xff0c;它的元素可能是字符串…...

访问控制列表

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

java入坑之类加载器

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

登录Tomcat控制台,账号密码输入正确但点击登录没反应不跳转到控制台页面

在tomcat-users.xml里面可以查看登录tomcat控制台的账号密码&#xff0c;如果账号密码输入正确还是登录不进去&#xff0c;则很有可能是tomcat的账号被锁了&#xff08;可在catalina.xxx.log里面查看&#xff09;。tomcat账号被锁定后默认情况是不访问控制台后5分钟自动解锁&am…...

[黑马程序员Pandas教程]——Pandas缺失值处理

目录&#xff1a; 学习目标空值和缺失值查看缺失值 加载数据并通过info函数初步查看缺失值情况df.isnull().sum()空值数量统计Missingno库对缺失值的情况进行可视化探查 安装missingno库missingno.bar(df)缺失值数量可视化missingno.matrix(df)缺失值位置的可视化missingno.he…...

Mysql进阶-视图篇

介绍 视图&#xff08;View&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存了查询的SQL逻辑&#xff0c;不保存查询结果。…...

一种libuv实现websockets服务的解决方案

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

MobaXterm配置SSHTunnel

本地与远程服务器之间存在防火墙&#xff0c;防火墙只允许SSH端口通过&#xff0c;为访问远程服务器&#xff0c;我们可以借助MobaXterm来与SSH服务器建立隧道&#xff0c;使得防火墙外的用户能够访问远程服务器 配置 打开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…...

如何开发一个求职招聘小程序?详细步骤解析与教程

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

安克创新音频算法工程师(应届生)招聘

职位描述&#xff1a; 负责音频处理算法的研发和优化&#xff0c;包括但不限于噪声抑制、回声消除、声反馈抑制、音效、声纹、唤醒、指令词识别等。 持续跟进国际前沿技术方向&#xff0c;预研端侧可落地的音频技术&#xff0c;打造技术影响力。 对音频处理系统进行模拟和实验…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

C#最佳实践:为何优先使用as或is而非强制转换

C#最佳实践&#xff1a;为何优先使用as或is而非强制转换 在 C# 的编程世界里&#xff0c;类型转换是我们经常会遇到的操作。就像在现实生活中&#xff0c;我们可能需要把不同形状的物品重新整理归类一样&#xff0c;在代码里&#xff0c;我们也常常需要将一个数据类型转换为另…...