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

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…...

物联网智能项目

物联网智能项目是一个涉及多个领域和技术的综合性项目&#xff0c;旨在通过互联网将各种物理设备连接起来&#xff0c;实现数据的采集、传输、处理和分析&#xff0c;进而实现智能化控制和管理。以下是对物联网智能项目的详细阐述&#xff0c;包括其定义、关键技术、应用领域、…...

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大的整数

编写程序&#xff0c;从键盘输入若干整数&#xff0c;将其保存入一个数组中。利用Arravs进行排序&#xff0c;然 后查找出第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 输入&#xff1a; language 在version history里面下载相应的版本&#xff0c;若没有就下载最新的 在下面安装 安装完重启就可以了。 可能会提示的失败&#xff1a; Unable to ins…...

vue3补充

form表单重置 const { proxy } getCurrentInstance()!; // 获取挂载在全局的上下文proxy.resetForm(ruleFormRef); // 在el-form中清空ref为ruleFormRef的表单注&#xff1a;不推荐使用 不推荐的原因 类型安全问题&#xff1a; 当在 TypeScript 环境中使用时&#xff0c;…...

关于Chrome浏览器没有网络,而其他浏览器正常这一问题的解决方法

网上有很多解决方案&#xff0c;但我尝试了之后都没有效果。后来尝试开启了VPN&#xff0c;问题完美解决了。 ✿✿ヽ(▽)ノ✿ 解决前&#xff1a;打开VPN后很容易就解决了&#xff1a;...

人工智能辅助汽车造型设计

随着科技的不断进步&#xff0c;人工智能&#xff08;AI&#xff09;在各个领域的应用越来越广泛&#xff0c;汽车设计行业也不例外。尤其在车辆外观造型设计中&#xff0c;AI正在成为设计师的重要助手&#xff0c;通过提供强大的工具和独特的创意方式&#xff0c;革新了传统设…...

专家访谈:心脑血管名医蔡英丽医生的医学智慧

在心脑血管疾病的诊疗领域&#xff0c;有这样一位医生&#xff0c;她以深厚的医学功底、精湛的医术和无私的爱心&#xff0c;赢得了广大患者的信赖与赞誉。她&#xff0c;就是北京心脑血管科的蔡英丽医生。今天&#xff0c;我们将带您走进蔡英丽医生的医学世界&#xff0c;一探…...

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…...

小程序开发设计-第一个小程序:注册小程序开发账号②

上一篇文章导航&#xff1a; 小程序开发设计-小程序简介①-CSDN博客https://blog.csdn.net/qq_60872637/article/details/142217803?sharetypeblogdetail&sharerId142217803&sharereferPC&sharesourceqq_60872637&spm1011.2480.3001.8118 须知&#xff1a;不…...

C++基础面试题 | C++中的构造函数可以是虚函数吗? C++中的析构函数一定要是虚函数吗?

文章目录 问题一&#xff1a;在C中&#xff0c;构造函数不能是虚函数。问题二&#xff1a;析构函数不一定需要声明为虚函数&#xff0c;但在多态环境下&#xff0c;建议一定将其声明为虚函数。示例虚函数总结 问题一&#xff1a;在C中&#xff0c;构造函数不能是虚函数。 这是…...

Leetcode—1184. 公交站间的距离【简单】

2024每日刷题&#xff08;161&#xff09; Leetcode—1184. 公交站间的距离 实现代码 class Solution { public:int distanceBetweenBusStops(vector<int>& distance, int start, int destination) {int clockwise 0;int counterclockwise 0;if(start > desti…...

【python数据处理】保存网页

直觉上处理网页信息&#xff0c;很多人会先将网页保存成HTML&#xff0c;然后做文本分析。但这样做是不够的&#xff0c;因为网页可能内嵌图片&#xff0c;这些图片在HTML里就是一处链接&#xff0c;离线处理时无法还原&#xff0c;相当于丢失了图片信息。更好的做法是将整个网…...

智能体趋势:未来科技的核心驱动力

随着人工智能&#xff08;AI&#xff09;技术的不断发展&#xff0c;**智能体&#xff08;intelligent agents&#xff09;**逐渐成为当今科技发展的重要趋势。这些智能体不仅仅是软件&#xff0c;它们正在改变我们生活和工作的方式&#xff0c;成为推动科技和社会变革的核心力…...

学习笔记 韩顺平 零基础30天学会Java(2024.9.16)

P563 自定义泛型方法 当调用方法时&#xff0c;要传入参数&#xff0c;因为当传入参数时&#xff0c;编译器就可以确定泛型代表的类型 泛型方法和方法使用了泛型是不一样的 泛型方法可以使用类声明的泛型&#xff0c;也可以使用自己的泛型 P564 泛型方法练习 P565 泛型的继承和…...

python selenium网页操作

一、安装依赖 pip install -U seleniumselenium1.py&#xff1a; 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号设备&#xff0c;设备名称为 /gpu:0os.environ["CUDA_VISIBLE_DEVICES"] "0" 设置当前使用的GPU设备为0, 1号两个设备&#xff0c;名称依次为 /gpu:0、/gpu:1&#xff1a; os.environ[&quo…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...