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

vue 文件预览mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml

vue 文件预览 图片、mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml

最近公司要做一个类似电脑文件夹的功能,支持文件夹操作,文件操作,这里就不说文件夹操作了,说说文件预览操作,本人是后端java开发,前端vue,目前没有人,就也由我来写,直接上代码(我的文件是上传到OSS上的,预览远程文件的话需要配置好跨域)

图片就简单了,直接打开新的窗口

window.open(url,'_blank')

视频也是一样的,直接打开新的窗口

window.open(url,'_blank')

docx

这里使用的是vue-office组件,先安装依赖----------------------------------------#docx文档预览组件
npm install @vue-office/docx vue-demi@0.14.6
--------------------------------------------------------
页面中引入组件
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'<script>export default {components:{VueOfficeDocx},
</script>
<template><vue-office-docxclass="show_office":src="docxUrl"style="height: 90vh;"/></template>

excel

这里使用的是vue-office组件,先安装依赖----------------------------------------#excel文档预览组件
npm install @vue-office/excel vue-demi@0.14.6--------------------------------------------------------
页面中引入组件//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'<script>
export default {components:{VueOfficeExcel},
</script><template><vue-office-excelclass="show_office":src="excelUrl"style="height: 90vh;"/>
</template>

pdf

这里使用的是vue-office组件,先安装依赖---------------------------------------#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.14.6
--------------------------------------------------------
页面中引入组件//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'<script>
export default {components:{VueOfficePdf},</script></template><vue-office-pdfclass="show_office":src="pdfUrl"style="height: 90vh;"/>      
</template>             

txt、html

<divstyle="width:100%;height: 90vh;"v-html="txtUrl"/>axios.get(url, { responseType: 'text' }).then(response => {// 根据设置的编码进行处理,这里假定utf-8this.txtUrl = response.data;})

xml

axios.get(url, { responseType: 'text' }).then(response => {const parser = new DOMParser();const xmlDoc = parser.parseFromString(response.data, 'text/xml');this.parsedXML = new XMLSerializer().serializeToString(xmlDoc.documentElement);})<pre style="width:100%;height: 90vh;"><code>{{ parsedXML }}</code></pre>

pptx

这里使用的是PPTXjs
1.下载好的PPTXjs放到public目录下
在这里插入图片描述
2.修改PPYXjs的index.hhtml,获取实际文件地址
在这里插入图片描述
3 通过拼接地址,请求PPYXjs实现预览操作
在这里插入图片描述

链接: https://blog.csdn.net/IAIPython/article/details/137677707
链接: https://github.com/501351981/vue-office

相关文章:

vue 文件预览mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml

vue 文件预览 图片、mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml 最近公司要做一个类似电脑文件夹的功能&#xff0c;支持文件夹操作&#xff0c;文件操作,这里就不说文件夹操作了&#xff0c;说说文件预览操作&#xff0c;本人是后端java开发&#xff0c;前端vue&#…...

生活中优秀学习习惯

早起&#xff1a; 23点睡--4至6点起床&#xff08;睡足7、8个钟头&#xff09;&#xff0c;起来第一件事是工作&#xff08;或学习&#xff09;。不是吃早餐&#xff0c;不是刷牙。&#xff08;空腹工作一段时间&#xff09;--做推理让头脑运作&#xff0c;不要背书&#xff0…...

什么是负载均衡?在网络中如何实现?

负载均衡&#xff08;Load Balancing&#xff09;是一种网络技术&#xff0c;用于将网络请求或数据传输任务分发到多个服务器或处理单元上&#xff0c;以实现更高效的资源利用、更高的处理能力和更好的系统可靠性。负载均衡的目标是优化资源使用、最大化吞吐量、减少响应时间&a…...

【YOLOv10改进[Backbone]】图像修复网络AirNet助力YOLOv10目标检测效果 + 含全部代码和详细修改方式 + 手撕结构图 + 全网首发

本文带来的是图像复原网络AirNet,它由基于对比度的退化编码器( CBDE )和退化引导的恢复网络( DGRN )两个模块组成。可以在一个网络中恢复各种退化图像。AirNet不受损坏类型和级别的先验限制,仅使用观察到的损坏图像进行推理。本文中将使用图像修复网络AirNet助力YOLOv10的目标…...

ubuntu22.04 gitleb服务器满了,扩容机器的磁盘的详细步骤

在Ubuntu 22.04上为GitLab服务器扩容磁盘可以分为以下几步进行&#xff1a;增加磁盘空间、扩展文件系统&#xff0c;并确保数据安全。这些步骤可以应用于物理服务器或虚拟机&#xff08;包括云服务中的实例&#xff09;。以下是详细步骤&#xff1a; 1. 添加新的磁盘空间 1.1…...

kafka-集群-主题创建

文章目录 1、集群主题创建1.1、查看 efak1.2、创建 主题 my_topic1 并建立6个分区并给每个分区建立3个副本1.2.1、查看 my_topic1 的详细信息 1.3、停止 kafka-01实例&#xff0c;端口号为 9095 1、集群主题创建 1.1、查看 efak 已经有三个kafka实例 1.2、创建 主题 my_topic1…...

Python 连接 MySQL 及 SQL增删改查(主要使用sqlalchemy)

一、环境 工作中需要用到python和mysql数据库&#xff0c;本次文档记录相关操作。 环境&#xff1a;windows10、python 3.11.7 mysql版本&#xff1a;5.7 二、MySQL的连接和使用 本人使用过的两种方式 2.1方式一&#xff1a;sql为主 2.1.1创建连接 import sqlalchemy fro…...

JAVAEE值网络编程(2)_TCP流套接字及通信模型、TCP网络编程及代码实例

前言 在上一节内容中&#xff0c;我们介绍了什么是套接字&#xff0c;以及使用UDP数据报套接字网络编程&#xff0c; 最后我们还介绍了Java数据报套接字通信模型以及相关代码实例。在这一节我们将会介绍TCP流套接字编程。 一、流套接字及通信模型 1.1 TCP套接字 TCP&#xff0…...

【MMU】——MMU 页命中/缺页

文章目录 MMU 页命中/缺页MMU 命中MMU 缺页 MMU 页命中/缺页 MMU 命中 处理器产生一个虚拟地址。MMU生成 PTE 地址&#xff0c;并从高速缓存/主存请求得到它。高速缓存/主存向 MMU 返回 PTE。MMU 构造物理地址&#xff0c;并把它传送给高速缓存/主存。高速缓存/主存返回所请求…...

Win32和c++11多线程

Win32和c11多线程 一、概念1.线程的特点线程内核对象线程控制块线程是独立调度和分派的基本单位共享进程的资源 2.线程的上下文切换引起上下文切换的原因 3.线程的状态 二、Windows多线程API1.CreateThread创建线程2.获取线程ID3.关闭线程句柄4.挂起线程5.恢复线程6.休眠线程的…...

关于python包导入问题的重思考

将顶层目录直接设置为一个包 像这样&#xff0c;每一个文件从顶层包开始导入 这样可以解决我的问题&#xff0c;但是要注意的时&#xff0c;要避免使用出现上下级出现同名包的情况&#xff0c;比如&#xff1a; AutoServer--AutoServer--__init__.py--__init__.py这种情况下…...

攻防世界---misc---津门杯2021-m1

1、题目描述&#xff0c;下载附件是一张bmp格式的图片 2、直觉告诉我这和图片的颜色通道有关 3、于是我就尝试用stegslove打开图片 4、将颜色通道都改为0&#xff0c;点击preview 5、然后发现一串base64编码 6、解码得flag flag{l5DGqF1pPzOb2LU919LMaBYS5B1G01FD}...

【计算机视觉(8)】

基于Python的OpenCV基础入门——图像直方图 直方图图像直方图 图像直方图代码以及实现效果 直方图 直方图是一种用于描述图像亮度分布的统计工具。它将图像的像素亮度值按照不同的亮度等级进行计数&#xff0c;并以直方图的形式呈现出来。图像直方图可以显示图像中每个亮度级别…...

Linux操作系统:Redis在虚拟环境下的安装与部署

Redis下载方法 最近部署项目的时候用到了Redis&#xff0c;自己在安装的时候也碰到了一些列问题最终安装成功&#xff0c;记录一下自己的安装历程。前期准备&#xff1a; 服务器Linux版本&#xff1a;Centos8.4 64位&#xff08;http://isoredirect.centos.org/centos/8/isos/…...

哈希表和二维矩阵的结合-2352. 相等行列对(新思路、新解法)

题目链接及描述 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/equal-row-and-column-pairs/description/?envTypest…...

深度学习中无监督学习

深度学习中的无监督学习 无监督学习&#xff08;Unsupervised Learning&#xff09;是一种机器学习方法&#xff0c;在没有标签数据的情况下&#xff0c;从数据中提取有意义的模式和特征。无监督学习广泛应用于深度学习中&#xff0c;以解决数据标注困难和大量无标签数据存在的…...

JVM基础知识

一、JVM的内存区域划分 一个进程在运行的时候,会向操作系统申请到内存资源,从来存放程序运行的相关数据。 JVM本质上就是一个java进程,在运行的时候也会从操作系统那搞一块内存&#xff0c;供Java代码执行使用。 JVM又把申请的一块内存根据不同的用途划分出了不同区域。 每一…...

618网购节,电商能挡住恶意网络爬虫的攻击吗?

目录 爬虫盗取电商数据的步骤 电商平台如何发现网络爬虫&#xff1f; 如何拦截违法网络爬虫 2023年&#xff0c;杭州中院审结了两起涉及“搬店软件”的不正当竞争案件。本案的原告是国内某大型知名电子商务平台的运营主体&#xff0c;而被告则是开发了一款名为“某搬家快速商品…...

Codeforces Round 951 (Div. 2) C、D(构造、线段树)

1979C - Earning on Bets 构造题&#xff1a;观察到k范围很小&#xff0c;首先考虑最终硬币总数可以是多少&#xff0c;我们可以先假设最终的硬币总数为所有k取值的最小公倍数&#xff0c;这样只需要满足每个结果添加1枚硬币即可赚到硬币。 // Problem: C. Earning on Bets //…...

elmentUI el-table 总结行

背景 原因&#xff1a;表格展示的都是明细数据&#xff0c;需要对当前的明细数据的部分字段进行汇总难点&#xff1a;汇总的条件不一定&#xff0c;有时候客户查的是1天&#xff0c;有时候是10天 官方写法 只开启开关 开启汇总开关如果没有汇总方法&#xff0c; 会自动汇总所有…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

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

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