Vue2 doc、excel、pdf、ppt、txt、图片以及视频等在线预览

Vue2 doc、excel、pdf、ppt、txt、图片等在线预览

  • 安装
  • 使用
    • 目录结构
    • 直接上代码
      • src\components\FileView\doc\index.vue
      • src\components\FileView\excel\index.vue
      • src\components\FileView\img\index.vue
      • src\components\FileView\pdf\index.vue
      • src\components\FileView\ppt\index.vue
      • src\components\FileView\txt\index.vue
      • src\components\FileView\index.vue
      • src\components\FileView\video\index.vue
    • 应用实例
      • 我的使用场景

安装

npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi@0.14.6

vue-demi@0.14.6; 其中 @0.14.6 为版本号,可以不加,默认下载最新版。

如果是 vue2.6 版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

使用

目录结构

src\components
在这里插入图片描述

直接上代码

src\components\FileView\doc\index.vue

<template><div><vue-office-docx:src="docx"style="height: 75vh"@rendered="rendered"@error="errorHandler"/></div>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";export default {components: {VueOfficeDocx,},props: {docx: {type: String,default:"http://qncdn.qkongtao.cn/lib/teamadmin/files/Hadoop2.7.1%E4%BC%AA%E5%88%86%E5%B8%83%E5%BC%8F%E9%9B%86%E7%BE%A4%E5%AE%89%E8%A3%85%E6%96%87%E6%A1%A3.docx", //设置文档网络地址,可以是相对地址},},data() {return {};},methods: {rendered() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},},
};
</script>

src\components\FileView\excel\index.vue

<template><vue-office-excel:src="excel":options="options"@rendered="renderedHandler"@error="errorHandler"style="height: 75vh"/>
</template><script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";export default {components: {VueOfficeExcel,},props: {excel: {type: String,default:"http://qncdn.qkongtao.cn/lib/teamadmin/files/2021%E5%B1%8A%E5%85%A8%E5%9B%BD%E5%90%84%E5%9C%B0%E6%B4%BE%E9%81%A3%E5%9C%B0%E5%9D%80.xlsx", //设置文档地址},},data() {return {options: {xls: true, //预览xlsx文件设置为false 预览xls文件设置为trueminColLength: 0,minRowLength: 0,widthOffset: 10,heightOffset: 10,},};},methods: {renderedHandler() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},},
};
</script>

src\components\FileView\img\index.vue

<template><div style="display: flex; justify-content: center"><el-image :src="imgUrl" :preview-src-list="[imgUrl]"> fit="contain"></el-image></div>
</template><script>
export default {props: {imgUrl: {type: String,default: "",},},components: {},data() {return {};},methods: {closeImage() {},},
};
</script>

src\components\FileView\pdf\index.vue

<template><vue-office-pdf :src="pdf" style="height: 75vh" @rendered="rendered" />
</template><script>
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";export default {components: {VueOfficePdf,},props: {pdf: {type: String,default:"http://qncdn.qkongtao.cn/lib/teamadmin/files/%E6%B7%B1%E5%9C%B3-xx-Java%E9%AB%98%E7%BA%A7.pdf",},},data() {return {};},methods: {rendered() {console.log("渲染完成");},},
};
</script>

src\components\FileView\ppt\index.vue

PPT预览使用微软提供的方法进行文件预览

<template><iframeid="iframe1"width="100%"height="700px"frameborder="0"border="0"marginwidth="0"marginheight="0"scrolling="no"allowtransparency="no":src="'https://view.officeapps.live.com/op/embed.aspx?src=' + fileUrl"></iframe>
</template><script>
export default {props: {fileUrl: {type: String,default: "",},},components: {},data() {return {};},methods: {},
};
</script>

src\components\FileView\txt\index.vue

<template><div><pre class="pre-txt">{{ txtContent }}</pre></div>
</template><script>
import axios from "axios";
export default {components: {},props: {fileUrl: {type: String,default: "https://example.com/your-txt-file.txt",},},data() {return {txtContent: "",};},mounted() {this.fetchTxtFile();},methods: {fetchTxtFile() {axios.get(this.fileUrl).then((response) => {this.txtContent = response.data;}).catch((error) => {console.error("获取txt文件失败:", error);});},},
};
</script>
<style scoped>
.pre-txt {font-size: 12px;padding: 0;width: 100%;max-height: 70vh;min-height: 70vh;margin: 0;background: #f0f0f0;line-height: 20px; /* 行距 */overflow: auto; /* 超出宽度出现滑动条 */overflow-y: auto; /* 作用是隐藏IE的右侧滑动条 */
}
</style>

src\components\FileView\index.vue

<template><el-dialogtitle="文件预览":visible.sync="open"width="50vw":before-close="handleClose":close-on-click-modal="true"><DOC :docx="url" v-if="componentToUse === 'DOC'"></DOC><PDF :pdf="url" v-if="componentToUse === 'PDF'"></PDF><EXCEL :excel="url" v-if="componentToUse === 'EXCEL'"></EXCEL><TXT :fileUrl="url" v-if="componentToUse === 'TXT'"></TXT><IMG :imgUrl="url" v-if="componentToUse === 'IMG'"></IMG><PPT :fileUrl="url" v-if="componentToUse === 'PPT'"></PPT><!-- <span slot="footer" class="dialog-footer"><el-button @click="handleClose" size="small">关 闭</el-button></span> --><div v-if="componentToUse === 'WZ'">不支持的文件类型</div></el-dialog>
</template><script>
import DOC from "./doc/index.vue";
import PDF from "./pdf/index.vue";
import EXCEL from "./excel/index.vue";
import TXT from "./txt/index.vue";
import IMG from "./img/index.vue";
import PPT from "./ppt/index.vue";export default {components: {DOC,PDF,EXCEL,TXT,IMG,PPT,},props: {open: {type: Boolean,default: false,},url: {type: String,default:"http://qncdn.qkongtao.cn/lib/teamadmin/files/Hadoop2.7.1%E4%BC%AA%E5%88%86%E5%B8%83%E5%BC%8F%E9%9B%86%E7%BE%A4%E5%AE%89%E8%A3%85%E6%96%87%E6%A1%A3.docx", //设置文档网络地址,可以是相对地址},},data() {return {componentToUse: null, // 用于存储要使用的组件};},watch: {url() {// 当 url 改变时,重新判断文件类型并设置组件this.determineComponentType();},},created() {// 在组件创建时判断文件类型并设置组件this.determineComponentType();},methods: {rendered() {console.log("渲染完成");},handleClose() {this.$emit("update:open", false);},determineComponentType() {const fileExtension = this.url.split(".").pop().toLowerCase();switch (fileExtension) {case "docx":this.componentToUse = "DOC";break;case "pdf":this.componentToUse = "PDF";break;case "xlsx":case "xls":this.componentToUse = "EXCEL";break;case "txt":case "html":case "vue":case "js":case "json":this.componentToUse = "TXT";break;case "png":case "jpg":case "jpeg":this.componentToUse = "IMG";break;case "ppt":case "pptx":this.componentToUse = "PPT";break;default:console.error("不支持的文件类型");this.componentToUse = "WZ";}},},
};
</script>

src\components\FileView\video\index.vue

<template><divclass="m-video":class="{ 'u-video-hover': !hidden }":style="`width: ${veoWidth}; height: ${veoHeight};`"><videoref="veoRef"class="u-video":style="`object-fit: ${zoom};`":src="src":poster="veoPoster":autoplay="autoplay":controls="!originPlay && controls":loop="loop":muted="autoplay || muted":preload="preload"crossorigin="anonymous"@loadeddata="poster ? () => false : getPoster()"@pause="showPlay ? onPause() : () => false"@playing="showPlay ? onPlaying() : () => false"@click.prevent.once="onPlay"v-bind="$attrs">您的浏览器不支持video标签。</video><svgv-show="originPlay || showPlay"class="u-play":class="{ hidden: hidden }":style="`width: ${playWidth}px; height: ${playWidth}px;`"viewBox="0 0 24 24"><pathstroke-linecap="round"stroke-linejoin="round"stroke-width="1.5"d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path><pathstroke-linecap="round"stroke-linejoin="round"stroke-width="1.5"d="M15.25 12L9.75 8.75V15.25L15.25 12Z"></path></svg></div>
</template>
<script>
export default {name: "Video",props: {src: {// 视频文件url,必传,支持网络地址 https 和相对地址 require('@/assets/files/Bao.mp4')type: String,required: true,default: "",},poster: {// 视频封面url,支持网络地址 https 和相对地址 require('@/assets/images/Bao.jpg')type: String,default: "",},second: {// 在未设置封面时,自动截取视频第 second 秒对应帧作为视频封面type: Number,default: 0.5,},width: {// 视频播放器宽度,单位 pxtype: [String, Number],default: 800,},height: {// 视频播放器高度,单位 pxtype: [String, Number],default: 450,},/*参考 MDN 自动播放指南:https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guideAutoplay 功能据新政策,媒体内容将在满足以下至少一个的条件下自动播放:1.音频被静音或其音量设置为 02.用户和网页已有交互行为(包括点击、触摸、按下某个键等等)3.网站已被列入白名单;如果浏览器确定用户经常与媒体互动,这可能会自动发生,也可能通过首选项或其他用户界面功能手动发生4.自动播放策略应用到<iframe>或者其文档上autoplay:由于目前在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放!解决方法:设置视频 autoplay 时,视频必须设置为静音 muted: true 即可实现自动播放,然后用户可以使用控制栏开启声音,类似某宝商品自动播放的宣传视频逻辑*/autoplay: {// 视频就绪后是否马上播放,优先级高于 preloadtype: Boolean,default: false,},controls: {// 是否向用户显示控件,比如进度条,全屏等type: Boolean,default: true,},loop: {// 视频播放完成后,是否循环播放type: Boolean,default: false,},muted: {// 是否静音type: Boolean,default: false,},preload: {// 是否在页面加载后载入视频,如果设置了autoplay属性,则preload将被忽略;type: String,default: "metadata", // auto:一旦页面加载,则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频},showPlay: {// 播放暂停时是否显示播放器中间的暂停图标type: Boolean,default: true,},playWidth: {// 中间播放暂停按钮的边长type: Number,default: 96,},zoom: {// video的poster默认图片和视频内容缩放规则type: String,default: "contain", // none:(默认)保存原有内容,不进行缩放; fill:不保持原有比例,内容拉伸填充整个内容容器; contain:保存原有比例,内容以包含方式缩放; cover:保存原有比例,内容以覆盖方式缩放},},data() {return {veoPoster: this.poster,originPlay: true,hidden: false,};},computed: {veoWidth() {return '100%';},veoHeight() {if (typeof this.height === "number") {return this.height + "px";}return this.height;},},mounted() {if (this.autoplay) {this.hidden = true;this.originPlay = false;}/*自定义设置播放速度,经测试:在vue2中需设置:this.$refs.veoRef.playbackRate = 2在vue3中需设置:veo.value.defaultPlaybackRate = 2*/// this.$refs.veoRef.playbackRate = 2},methods: {/*loadedmetadata 事件在元数据(metadata)被加载完成后触发loadeddata 事件在媒体当前播放位置的视频帧(通常是第一帧)加载完成后触发若在移动/平板设备的浏览器设置中开启了流量节省(data-saver)模式,该事件则不会被触发。preload 为 none 时不会触发*/getPoster() {// 在未设置封面时,自动获取视频0.5s对应帧作为视频封面// 由于不少视频第一帧为黑屏,故设置视频开始播放时间为0.5s,即取该时刻帧作为封面图this.$refs.veoRef.currentTime = this.second;// 创建canvas元素const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");// canvas画图canvas.width = this.$refs.veoRef.videoWidth;canvas.height = this.$refs.veoRef.videoHeight;ctx.drawImage(this.$refs.veoRef, 0, 0, canvas.width, canvas.height);// 把canvas转成base64编码格式this.veoPoster = canvas.toDataURL("image/png");},onPlay() {if (this.originPlay) {this.$refs.veoRef.currentTime = 0;this.originPlay = false;}if (this.autoplay) {this.$refs.veoRef.pause();} else {this.hidden = true;this.$refs.veoRef.play();}},onPause() {this.hidden = false;},onPlaying() {this.hidden = true;},},
};
</script>
<style scoped>
* {box-sizing: border-box;margin: 0;padding: 0;
}
.m-video {display: inline-block;position: relative;background: #000;cursor: pointer;
}.u-play {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;fill: none;color: #fff;pointer-events: none;opacity: 0.7;transition: opacity 0.3s;
}
.hidden {opacity: 0;
}
.u-video {display: inline-block;width: 100%;height: 100%;vertical-align: bottom;
}
.u-video-hover {
}
</style>

应用实例

建议在main.js中增加全局组件引用

import FileView from '@/components/FileView'
Vue.component('FileView',FileView)

如果不使用全局挂载,那么请局部注册

我的使用场景

<FileView :open.sync="fileViewOpen" :url="fileUrl" v-if="fileViewOpen" />

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全星魅-物联网定位终端-北斗定位便携终端-北斗有源终端

在当今快速发展的物流运输行业中&#xff0c;精准定位与实时监控已成为确保货物安全与高效运输的关键因素。为了满足这一需求&#xff0c;QMCZ10作为一款集4G&#xff08;LTE Cat1&#xff09;通讯技术与智能定位功能于一体的终端产品&#xff0c;应运而生。它不仅具备普通定位…

交换机属性-持久化和自动删除等

交换机属性-持久化和自动删除 1、交换机属性2、交换机(Exchange)的持久化属性2.1、RabbitConfig配置类&#xff08;关键代码&#xff09;2.2、发送消息2.3、启动类2.4、application.yml配置文件2.5、pom.xml配置文件2.6、测试 3、交换机(Exchange)的自动删除属性3.1、RabbitCon…

基于Prometheus的client_golang库实现应用的自定义可观测监控

文章目录 1. 安装client_golang库2. 编写可观测监控代码3. 运行效果4. jar、graalvm、golang编译运行版本对比 前文使用javagraalvm实现原生应用可观测监控&#xff1a; prometheus client_java实现进程的CPU、内存、IO、流量的可观测&#xff0c;但是部分java依赖包使用了复杂…

Unity3D UI 拖拽

Unity3D 实现 UI 元素拖拽功能。 UI 拖拽 通常画布上的 UI 元素都是固定位置的&#xff0c;我们可以通过实现拖拽接口&#xff0c;让 UI 元素可以被拖拽到其他位置。 拖拽接口 创建一个脚本 UIDrag.cs&#xff0c;在默认继承的 MonoBehaviour 后面&#xff0c;再继承三个接…

《重学Java设计模式》之 工厂方法模式

《重学Java设计模式》之 建造者模式 《重学Java设计模式》之 原型模式 《重学Java设计模式》之 单例模式 模拟发奖多种商品 工程结构 奖品发放接口 package com.yys.mes.design.factory.store;public interface ICommodity {/*** Author Sherry* Date 14:20 2024/11/6**/voi…

【Python爬虫实战】DrissionPage 与 ChromiumPage:高效网页自动化与数据抓取的双利器

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、DrissionPage简介 &#xff08;一&#xff09;特点 &#xff08;二&#xff09;安装 &#xff08;三…

Word大珩助手:超大数字怎么读?35位数字?69位数字?

俄罗斯日前对谷歌开出了20000000000000000000000000000000000&#xff08;35位数字&#xff09;美元的罚款 这一数字远超全球GDP总和&#xff0c;消息一出很快就登上热搜。 面对这样一个庞大的数字&#xff0c;人们不禁好奇&#xff0c;这样的数字该如何读出来&#xff1f; …

Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized

这里是Themberfue 在上一节的最后&#xff0c;我们讨论两个线程同时对一个变量累加所产生的现象 在这一节中&#xff0c;我们将更加详细地解释这个现象背后发生的原因以及该如何解决这样类似的现象 线程安全问题 public class Demo15 {private static int count 0;public …

17、论文阅读:VMamba:视觉状态空间模型

前言 设计计算效率高的网络架构在计算机视觉领域仍然是一个持续的需求。在本文中&#xff0c;我们将一种状态空间语言模型 Mamba 移植到 VMamba 中&#xff0c;构建出一个具有线性时间复杂度的视觉主干网络。VMamba 的核心是一组视觉状态空间 (VSS) 块&#xff0c;搭配 2D 选择…

JavaAPI(1)

Java的API&#xff08;1&#xff09; 一、Math的API 是一个帮助我们进行数学计算的工具类私有化构造方法&#xff0c;所有的方法都是静态的&#xff08;可以直接通过类名.调用&#xff09; 平方根&#xff1a;Math.sqrt()立方根&#xff1a;Math.cbrt() 示例&#xff1a; p…

【362】基于springboot的在线租房和招聘平台

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统在线租房和招聘平台信息管理难度大&#xff0c;容错率低&…

华为HCIP —— QinQ技术实验配置

一、QinQ的概述 1.1QinQ的概念 QinQ&#xff08;802.1Q in 802.1Q&#xff09;技术是一项扩展VLAN空间的技术&#xff0c;通过在原有的802.1Q报文基础上再增加一层802.1Q的Tag来实现。 1.2QinQ封装结构 QinQ封装报文是在无标签的以太网数据帧的源MAC地址字段后面加上两个VL…

【数据集】【YOLO】【目标检测】抽烟识别数据集 6953 张,YOLO/VOC格式标注,吸烟检测!

数据集介绍 【数据集】抽烟识别数据集 6953 张&#xff0c;目标检测&#xff0c;包含YOLO/VOC格式标注。数据集中包含1种分类&#xff1a;“smoking”。数据集来自国内外图片网站和视频截图。检测范围园区吸烟检测、禁烟区吸烟检测、监控吸烟检测、无人机吸烟检测等。 主页私…

赛元MCU 脱机烧录步骤

烧录设置 生成烧录配置文件 载入配置文件 下载程序到烧录器中 并 对比 脱机烧录 1、 将SC-LINK 使用外部5V电源供电 2、将烧录口对准主板烧录接口 3、busy亮红灯&#xff0c;进入烧录ing&#xff0c;烧录成功后&#xff0c;OK灯亮蓝灯 注意事项 其中工程校验和 可以作为程序…

leetcode字符串(二)-重复的子字符串

题目 459.重复的子字符串 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s "abab" 输出: true 解释: 可由子串 "ab" 重复两次构成。示例 2: 输入: s "aba" 输出: false示例 3: 输入: …

langchain 4大组件 | AI应用开发

在人工智能的浪潮中&#xff0c;大型语言模型&#xff08;LLM&#xff09;逐渐成为推动科技进步的重要力量。而LangChain&#xff0c;作为一个专为LLM应用开发设计的框架&#xff0c;凭借其模块化和高效性&#xff0c;受到了广泛关注。本文将深入浅出地讲解LangChain中的四个基…

TensorFlow|咖啡豆识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 &#x1f37a; 要求&#xff1a; 自己搭建VGG-16网络框架调用官方的VGG-16网络框架 &#x1f37b; 拔高&#xff08;可选&#xff09;&#xff1a; 验证集准…

Jmeter5.X性能测试

Jmeter5.X性能测试 文章目录 Jmeter5.X性能测试一、掌握Http基础协议1.1 浏览器的B/S架构和C/S架构1.2 HyperText Transfer Protocol 超文本传输协议1.3 超文本传输协议Http消息体拆分讲解1.4 HTTP的九种请求方法和响应码介绍1.5 Http请求头/响应头1.6 Http常见请求/响应头cont…

信息安全工程师(81)网络安全测评质量管理与标准

一、网络安全测评质量管理 遵循标准和流程 网络安全测评应严格遵循国家相关标准和流程&#xff0c;确保测评工作的规范性和一致性。这些标准和流程通常包括测评方法、测评步骤、测评指标等&#xff0c;为测评工作提供明确的指导和依据。 选择合格的测评团队 测评团队应具备相关…

AI - 人工智能;Ollama大模型工具;Java之SpringAI(三)

AI - 人工智能&#xff1b;Java之SpringAI&#xff08;一&#xff09; AI - 人工智能&#xff1b;Java之SpringAI&#xff08;二&#xff09; 一、Ollama 官网&#xff1a;https://ollama.com/ Ollama是一个大模型部署运行工具&#xff0c;在该工具里面可以部署运行各种大模型…