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

vue3 查看word pdf excel文件

也是在网上找的基础上修改的 可以直接使用

npm install @vue-office/docx
npm install @vue-office/excel
npm install @vue-office/pdf​
<template><divclass="Office-Preview"v-loading="loading"element-loading-text="文件加载中..."><VueOfficeDocxv-if="fileType === 'docx'":src="fileUrl"@rendered="rendered"@error="onError"></VueOfficeDocx><VueOfficeExcelv-if="fileType === 'excel'":src="fileUrl"@rendered="rendered"@error="onError"></VueOfficeExcel><VueOfficePdfv-if="fileType === 'pdf'":src="fileUrl"@rendered="rendered"@error="onError"></VueOfficePdf><el-emptyv-if="fileType === 'errType'"image=""description="文件格式不规范":image-size="300"></el-empty><el-emptyv-if="fileType === 'loadErr'"image=""description="文件加载失败":image-size="300"></el-empty></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';// 引入 VueOffice 相关组件
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/excel/lib/index.css';
import VueOfficePdf from '@vue-office/pdf';// 使用 useRoute 获取链接参数
const route = useRoute();
const fileUrl = ref(route.query.url || ''); // 从 URL 参数中获取 fileUrl// 定义响应式数据
const fileType = ref('');
const loading = ref(true);const init = () => {if (!fileUrl.value) {console.error('文件为空');loading.value = false;return;}const fileName = fileUrl.value.split('/').pop();const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);if (fileExtension === 'doc' || fileExtension === 'docx') {fileType.value = 'docx';} else if (fileExtension === 'xls' || fileExtension === 'xlsx') {fileType.value = 'excel';} else if (fileExtension === 'pdf') {fileType.value = 'pdf';} else if (fileExtension === 'ppt' || fileExtension === 'pptx') {fileType.value = 'ppt';} else {fileType.value = 'errType';loading.value = false;}
};// 渲染和错误处理方法
const rendered = () => {console.log('渲染完成');loading.value = false;
};const onError = () => {console.error('加载出错');loading.value = false;fileType.value = 'loadErr';
};// 使用 Vue 3 的 onMounted 生命周期钩子
onMounted(() => {init();
});
</script><style scoped lang="scss">
.Office-Preview {overflow-y: scroll;height: 100%;
}
</style>

相关文章:

vue3 查看word pdf excel文件

也是在网上找的基础上修改的 可以直接使用 npm install vue-office/docx npm install vue-office/excel npm install vue-office/pdf​<template><divclass"Office-Preview"v-loading"loading"element-loading-text"文件加载中...">…...

java八股-垃圾回收机制-垃圾回收算法,分代回收,垃圾回收器

文章目录 垃圾回收算法引用计数法可达性分析算法 jvm垃圾回收算法标记清除算法标记整理算法复制算法本章总结 JVM中的分代回收本章总结 JVM有哪些垃圾回收器&#xff1f;1.串行垃圾收集器2.并行垃圾收集器3.CMS&#xff08;并发&#xff09;垃圾收集器本章小结 详细聊一下G1垃圾…...

iSCSI 和FC的概述

一、技术基础与架构 iSCSI 技术基础&#xff1a;iSCSI是基于TCP/IP协议的存储网络协议&#xff0c;它实现了在IP网络上运行SCSI协议。架构&#xff1a;iSCSI协议栈包括SCSI层、iSCSI层、TCP/IP层等&#xff0c;通过标准的以太网技术实现存储数据的传输。 FC 技术基础&#xff1…...

一文了解Android中的AudioFlinger

AudioFlinger 是 Android 音频框架中的一个核心组件&#xff0c;负责管理音频流的混合和输出。它是 Android 音频系统服务的一部分&#xff0c;作为音频框架和硬件之间的桥梁&#xff0c;接收应用程序的音频请求、进行混音处理&#xff0c;并最终通过音频硬件输出声音。 ![在这…...

超全面!一文带你快速入门HTML,CSS和JavaScript!

作为一名后端程序员&#xff0c;在开发过程中避免不了和前端打交道&#xff0c;所以就要了解一些前端的基础知识&#xff0c;比如三剑客HTML,CSS,JavaScript&#xff0c;甚至有必要学习一下Vue、React等前端主流框架。 学习文档&#xff1a;https://www.w3school.com.cn/ 一…...

C语言 | Leetcode C语言题解之第557题反转字符串中的单词III

题目&#xff1a; 题解&#xff1a; char* reverseWords(char* s) {int length strlen(s);char* ret (char*)malloc(sizeof(char) * (length 1));ret[length] 0;int i 0;while (i < length) {int start i;while (i < length && s[i] ! ) {i;}for (int p …...

408笔记合集

操作系统 《王道操作系统》-BitHachi 计算机网络 《王道计算机网络》--BitHachi 组成原理 《王道计算机组成原理》--BitHachi...

智慧医疗:纹理特征VS卷积特征

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

OPC学习笔记

一. 解决使用milo读取OPC设备字符串类型时&#xff0c;出现中文和特殊符号乱码的情况 解决前&#xff0c;读取字符串&#xff1a;你好 2. 解决后&#xff0c;读取字符串&#xff1a;你好 3. 解决前&#xff0c;读取字符串&#xff1a;165℃ 解决后&#xff0c;读取字符串&am…...

数据结构的时间复杂度和空间复杂度

目录 时间复杂度 空间复杂度 时间复杂度 基本操作的执行次数&#xff0c;为时间复杂度。 我们使用大O的渐进表示法来表示时间复杂度。 怎么使用&#xff1f; 先看例子&#xff1a; 在这个例子中&#xff0c; 基本操作为变量 count 的 加加 操作&#xff0c;并且&#xff0c;执行…...

HBase理论_背景特点及数据单元及与Hive对比

本文结合了个人的笔记以及工作中实践经验以及参考HBase官网&#xff0c;我尽可能把自己的知识点呈现出来&#xff0c;如果有误&#xff0c;还请指正。 1. HBase背景 HBase作为面向列的数据库运行在HDFS之上&#xff0c;HDFS缺乏随机读写操作&#xff0c;HBase正是为此而出现。…...

生产模式打包

在生产模式下打包 Node.js 和前端&#xff08;例如 Vue 或 React&#xff09;应用时&#xff0c;通常需要对代码进行优化&#xff0c;使其在生产环境中运行更高效。以下是如何在生产模式下配置和打包项目的步骤&#xff1a; 1. Node.js 生产模式打包 Node.js 本身不需要像前端…...

Vue的路由

Vue的路由 出发点&#xff1a;遇到多页面网页的反复跳转&#xff0c;有些繁琐&#xff0c;可以通过Vue的路由实现单页面中数据的变化 实现单页面中数据的变化&#xff08;通过Vue-router来进行操作的&#xff0c;数据的请求获取也需要ajax异步交互&#xff09;&#xff0c;具…...

Spring框架之策略模式 (Strategy Pattern)

策略模式&#xff08;Strategy Pattern&#xff09;详解 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;用于定义一系列算法&#xff0c;并将每种算法封装到独立的策略类中&#xff0c;使它们可以相互替换&#xff0c;从而使算法的变化独…...

探索Google Earth Engine:利用MODIS数据和R语言进行2000-2021年遥感生态指数(RSEI)的时空趋势分析

前段时间,小编学习了在GEE上进行遥感生态指数(RSEI)的评估,非常头疼,但是实验了两周后,亲测有效,主要采用的是MODIS数据分析了2000-2021年中国内蒙古某地的RSEI时间序列分布状况,现在把学习的代码分享给大家。 1 GEE计算RSEI 1.1研究区域导入与初步定义 var sa = ee…...

多商户中英双语电商系统设计与开发 PHP+mysql

随着全球电商市场的扩展&#xff0c;多商户平台成为了越来越多商家参与全球贸易的重要方式。为了适应不同语言用户的需求&#xff0c;尤其是中英双语用户的需求&#xff0c;设计一个支持中英双语的电商系统显得尤为重要。本文将重点探讨如何设计一个多商户中英双语电商系统&…...

牵手App红娘专属1V1服务,打造贴心交友指导

对于年轻一代而言&#xff0c;婚恋方式已明显区别于传统&#xff0c;他们更倾向于直接、活泼的交流方式&#xff0c;享受着在轻松愉快的氛围中边玩边交友的乐趣。线上社交平台&#xff0c;尤其是那些基于兴趣构建的交友模式&#xff0c;正逐渐成为他们探索爱情、寻找共鸣的新舞…...

论文解析:边缘计算网络中资源共享的分布式协议(2区)

目录 论文解析:边缘计算网络中资源共享的分布式协议(2区) 核心内容: 核心创新点的原理与理论: 多跳边缘计算场景 一、边缘计算的基本概念 二、多跳边缘计算场景的含义 三、多跳边缘计算场景的应用 四、多跳边缘计算场景的优势 论文解析:协作边缘计算网络中资源共…...

Android Osmdroid + 天地图 (一)

Osmdroid 天地图 前言正文一、配置build.gradle二、配置AndroidManifest.xml三、获取天地图的API Key① 获取开发版SHA1② 获取发布版SHA1 四、请求权限五、显示地图六、源码 前言 Osmdroid是一款完全开源的地图基本操作SDK&#xff0c;我们可以通过这个SDK去加一些地图API&am…...

浅谈:基于三维场景的视频融合方法

视频融合技术的出现可以追溯到 1996 年 , Paul Debevec等 提出了与视点相关的纹理混合方法 。 也就是说 &#xff0c; 现实的漫游效果不是从摄像机的角度来看 &#xff0c; 但其仍然存在很多困难 。基于三维场景的视频融合 &#xff0c; 因其直观等特效在视频监控等相关领域有着…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

嵌入式面试常问问题

以下内容面向嵌入式/系统方向的初学者与面试备考者,全面梳理了以下几大板块,并在每个板块末尾列出常见的面试问答思路,帮助你既能夯实基础,又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层(Link Layer) 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...