vue 在线预览word和excel
yarn add @vue-office/excel @vue-office/docx

<template><div><vue-office-docx:src="docx"style="height: 100%; margin: 0; padding: 0"@rendered="rendered"/></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:"a.docx", //设置文档网络地址,可以是相对地址},},data() {return {};},methods: {rendered() {console.log("渲染完成");},},
};
</script>
<template><vue-office-excel:src="excel"@rendered="renderedHandler"@error="errorHandler"style="height: calc(100vh - 90px)"/>
</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:"a.xlsx", //设置文档地址},},data() {return {};},methods: {renderedHandler() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},},
};
</script>
也可以浏览器选择文件后直接预览,不需要文件是在线的
<template><div><div v-if="extension === 'docx' || extension === 'doc'"><vue-office-docx :src="docx" style="height: 500px; margin: 0; padding: 0" /></div><div v-if="extension === 'xlsx' || extension === 'xls'"><vue-office-excel :src="excel" style="height: 500px" /></div><div v-if="extension === 'pdf'"><iframe v-if="pdfSrc" :src="pdfSrc" width="100%" height="500"></iframe></div></div>
</template>
<script lang="ts" name="cl-file-viewer" setup>
import { ref, watch } from "vue";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/excel/lib/index.css";
import "@vue-office/docx/lib/index.css";const props = defineProps({fileType: {type: String,default: "file"}, // 文件类型file: {type: Object,default: null} //文件流 或者文件地址
});// 获取文件扩展名
const extension = ref("");
const docx = ref("");
const excel = ref("");
const pdfSrc:any = ref(null);const readFile = async () => {// 获取选中的文件//@ts-ignoreconst file:any = props.fileType === "file" ? props.file : getFileStream(props.file);if (!file) {return;}// 获取文件扩展名extension.value = file.name.split(".").pop();// 根据文件扩展名进行处理switch (extension.value) {case "docx":case "doc":// 读取Word文件readWordFile(file);break;case "xlsx":case "xls":// 读取Excel文件readExcelFile(file);break;case "pdf":// 读取PDF文件readPdfFile(file);break;default:// 不支持的文件类型alert("Unsupported file type");}
};
const readWordFile = (file: any) => {docx.value = URL.createObjectURL(file);
};const readExcelFile = (file: any) => {excel.value = URL.createObjectURL(file);
};const readPdfFile = async (file: any) => {if (file) {// 判断传入的 file 参数是否为字符串类型if (props.file instanceof String) {// 如果是字符串类型,则将其赋值给 pdfSrc.valuepdfSrc.value = props.file;} else {// 如果不是字符串类型,则使用 URL.createObjectURL 方法创建一个指向该文件的 URL,并将其赋值给 pdfSrc.valuepdfSrc.value = URL.createObjectURL(file);}}
};// url地址转发为文件流
const getFileStream = (url: string) => {return new Promise((resolve, reject) => {// 创建一个XMLHttpRequest对象const xhr = new XMLHttpRequest();// 设置请求方法为GET,并传入请求的URLxhr.open("GET", url);// 设置响应类型为blob,以便能够处理二进制数据xhr.responseType = "blob";// 当请求加载完成时,调用resolve方法并将响应数据作为参数传入xhr.onload = () => resolve(xhr.response);// 当请求发生错误时,调用reject方法并将错误信息作为参数传入xhr.onerror = (err) => reject(err);});
};// 初始化
watch(() => props.file,(newValue, oldValue) => {if (newValue && newValue != oldValue) {nextTick(() => {readFile();});}},{ immediate: true }
);
</script>
参考链接
https://blog.csdn.net/qq_42038623/article/details/131600935
人工智能学习网站
https://chat.xutongbao.top
相关文章:
vue 在线预览word和excel
yarn add vue-office/excel vue-office/docx <template><div><vue-office-docx:src"docx"style"height: 100%; margin: 0; padding: 0"rendered"rendered"/></div> </template><script> //引入VueOfficeDoc…...
物联网智能项目
物联网智能项目是一个涉及多个领域和技术的综合性项目,旨在通过互联网将各种物理设备连接起来,实现数据的采集、传输、处理和分析,进而实现智能化控制和管理。以下是对物联网智能项目的详细阐述,包括其定义、关键技术、应用领域、…...
828华为云征文|Flexus云服务器X:Python安装的极致便捷之旅
目录 前言 一、Flexus云服务器X介绍 1.1 Flexus云服务器X实例简介 1.2 Flexus云服务器X实例特点 1.3 Flexus云服务器X实例场景需求 二、Flexus云服务器X购买 2.1 Flexus X实例购买 2.2 重置密码 2.3 登录服务器 三、Flexus云服务器X安装Python 3.1 Python下载 3.2 Python安装 3…...
Midjourney中秋特典-12张图附魔咒
第一张 魔咒 A Mid-Autumn Festival poster, a round bright moon, a Chinese-style pavilion with a scene of a reunion from Dream of the Red Chamber, a new Chinese style --ar 3:4 --v 6.1第二张 魔咒 The bright full moon hung in the night sky,clear in outline a…...
编写程序,从键盘输入若干整数,将其保存入一个数组中。利用Arravs进行排序,然后查找出第3大的整数
编写程序,从键盘输入若干整数,将其保存入一个数组中。利用Arravs进行排序,然 后查找出第3大的整数 import java.util.ArrayList; import java.util.Arrays; import java.util.Scanner;public class helloworld {public static void main(Stri…...
VSCode 离线安装中文语言包
1.插件市场 Extensions for Visual Studio family of products | Visual Studio Marketplace 输入: language 在version history里面下载相应的版本,若没有就下载最新的 在下面安装 安装完重启就可以了。 可能会提示的失败: Unable to ins…...
vue3补充
form表单重置 const { proxy } getCurrentInstance()!; // 获取挂载在全局的上下文proxy.resetForm(ruleFormRef); // 在el-form中清空ref为ruleFormRef的表单注:不推荐使用 不推荐的原因 类型安全问题: 当在 TypeScript 环境中使用时,…...
关于Chrome浏览器没有网络,而其他浏览器正常这一问题的解决方法
网上有很多解决方案,但我尝试了之后都没有效果。后来尝试开启了VPN,问题完美解决了。 ✿✿ヽ(▽)ノ✿ 解决前:打开VPN后很容易就解决了:...
人工智能辅助汽车造型设计
随着科技的不断进步,人工智能(AI)在各个领域的应用越来越广泛,汽车设计行业也不例外。尤其在车辆外观造型设计中,AI正在成为设计师的重要助手,通过提供强大的工具和独特的创意方式,革新了传统设…...
专家访谈:心脑血管名医蔡英丽医生的医学智慧
在心脑血管疾病的诊疗领域,有这样一位医生,她以深厚的医学功底、精湛的医术和无私的爱心,赢得了广大患者的信赖与赞誉。她,就是北京心脑血管科的蔡英丽医生。今天,我们将带您走进蔡英丽医生的医学世界,一探…...
Ubuntu 22.04 源码下载的几种方法
1、查询当前系统内核版本 rootubuntu22:~# uname -r 5.15.0-118-generic 2、查询本地软件包数据库中的内核源码信息 rootubuntu22:~# apt search linux-source Sorting... Done Full Text Search... Done linux-source/jammy-updates,jammy-security,now 5.15.0.119.119 all…...
floodfill+DFS(1)
文章目录 图像渲染岛屿数量岛屿的最大面积被围绕的岛屿 图像渲染 class Solution { public:int m 0, n 0;bool check[51][51] {false};vector<vector<int>> floodFill(vector<vector<int>>& image, int sr, int sc, int color) {m image.size…...
小程序开发设计-第一个小程序:注册小程序开发账号②
上一篇文章导航: 小程序开发设计-小程序简介①-CSDN博客https://blog.csdn.net/qq_60872637/article/details/142217803?sharetypeblogdetail&sharerId142217803&sharereferPC&sharesourceqq_60872637&spm1011.2480.3001.8118 须知:不…...
C++基础面试题 | C++中的构造函数可以是虚函数吗? C++中的析构函数一定要是虚函数吗?
文章目录 问题一:在C中,构造函数不能是虚函数。问题二:析构函数不一定需要声明为虚函数,但在多态环境下,建议一定将其声明为虚函数。示例虚函数总结 问题一:在C中,构造函数不能是虚函数。 这是…...
Leetcode—1184. 公交站间的距离【简单】
2024每日刷题(161) Leetcode—1184. 公交站间的距离 实现代码 class Solution { public:int distanceBetweenBusStops(vector<int>& distance, int start, int destination) {int clockwise 0;int counterclockwise 0;if(start > desti…...
【python数据处理】保存网页
直觉上处理网页信息,很多人会先将网页保存成HTML,然后做文本分析。但这样做是不够的,因为网页可能内嵌图片,这些图片在HTML里就是一处链接,离线处理时无法还原,相当于丢失了图片信息。更好的做法是将整个网…...
智能体趋势:未来科技的核心驱动力
随着人工智能(AI)技术的不断发展,**智能体(intelligent agents)**逐渐成为当今科技发展的重要趋势。这些智能体不仅仅是软件,它们正在改变我们生活和工作的方式,成为推动科技和社会变革的核心力…...
学习笔记 韩顺平 零基础30天学会Java(2024.9.16)
P563 自定义泛型方法 当调用方法时,要传入参数,因为当传入参数时,编译器就可以确定泛型代表的类型 泛型方法和方法使用了泛型是不一样的 泛型方法可以使用类声明的泛型,也可以使用自己的泛型 P564 泛型方法练习 P565 泛型的继承和…...
python selenium网页操作
一、安装依赖 pip install -U seleniumselenium1.py: from selenium import webdriver from selenium.webdriver.common.by import Bydriver webdriver.Chrome() driver.get("https://www.selenium.dev/selenium/web/web-form.html") title driver.ti…...
pytorch使用技巧
pytorch使用技巧 1. 指定GPU编号 设置当前使用的GPU设备仅为0号设备,设备名称为 /gpu:0os.environ["CUDA_VISIBLE_DEVICES"] "0" 设置当前使用的GPU设备为0, 1号两个设备,名称依次为 /gpu:0、/gpu:1: os.environ[&quo…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
如何更改默认 Crontab 编辑器 ?
在 Linux 领域中,crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用,用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益,允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
