在vue3中实现pptx、word、excel预览

插件推荐

PPTXjs
vue-office

代码

<script setup lang="ts" name="home">
import { computed, nextTick, ref, onMounted } from 'vue';
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel';
//引入相关样式
import '@vue-office/docx/lib/index.css';
const docx = ref('/file/test.docx'); //设置文档网络地址,可以是相对地址
const excel = ref('/file/test.xlsx'); //设置excel网络地址,可以是相对地址
const pptx = ref('/file/test.pptx'); //设置ppt网络地址,可以是相对地址const renderedHandler = () => {console.log('渲染完成');
};
const errorHandler = () => {console.log('渲染失败');
};
</script><template><div><h1>PPT文档预览</h1><iframe :src="`/PPTXjs-1.21.1/index.html?file=` + pptx" width="100%" height="900" frameborder="0"></iframe><h1>word文档预览</h1><vue-office-docx :src="docx" style="width: 100%; height: 900px" @rendered="renderedHandler" @error="errorHandler" /><h1>excel预览</h1><vue-office-excel:src="excel"style="width: 100%; height: 900px"@rendered="renderedHandler"@error="errorHandler"/></div>
</template><style scoped></style>

在这里插入图片描述

pptxjs 文件传递

需要在 index.html 中获取文件地址
在这里插入图片描述

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

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

相关文章

5-云原生监控体系-Grafana-使用配置文件实现自动化导入Dashboard

文章目录 1. 介绍(此文档使用的版本 grafana-enterprise-10.0.3-1)2. 清空之前的实验数据3. 使用配置文件方式配置 Datasource3.1. 创建配置文件3.2. 重启服务并检查是否生效4. 使用配置文件方式配置 Dashboard4.1. 创建配置文件5. 配置 Dashboard JSON 文件5.1. 下载 JSON 文…

解决CSS中鼠标移入到某个元素其子元素被遮挡的问题

我们在开发中经常遇到一种场景&#xff0c;就是给元素加提示信息&#xff0c;就是鼠标移入到盒子上面时&#xff0c;会出现提示信息这一功能&#xff0c;如果我们给盒子加了hover&#xff0c;当鼠标移入到盒子上时&#xff0c;让他往上移动5px&#xff0c;即transform: transla…

C/C++基础----数组和引入指针

数组 数组的定义 语法&#xff1a; 类型 变量名[数组大小] {数组内容1,数组内容2}; int array[5] {1,2,3,4,5};代码 int main(){// 定义数组&#xff0c;大小不写&#xff0c;数组内默认有多少元素大小就为多少int array_a[] {1, 2, 3, 4, 5, 6};// 定义数组长度为5&#x…

多线程小问题

多线程小问题 一:简述 wait 和 sleep 有什么区别&#xff1f;二:请说明Thread类中run和start的区别 一:简述 wait 和 sleep 有什么区别&#xff1f; 共同点&#xff1a; 都是使线程暂停一段时间的方法。 不同点&#xff1a; wait是Object类中的一个方法&#xff0c;sleep是Thr…

浅谈数据结构

1.前言 数据结构&#xff0c;就是一种程序设计优化的方法论&#xff0c;研究数据的逻辑结构和物理结构以及他们之间的关系&#xff0c;并对这种结构定义相应的运算&#xff0c;目的是加快程序的执行速度&#xff0c;减少占用的内存空间. 2.研究对象1--数据间的逻辑关系 数据…

蓝桥集训之三国游戏

蓝桥集训之三国游戏 核心思想&#xff1a;贪心 将每个事件的贡献值求出 降序排序从大到小求和为正是即可 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;const int N 100010;int a[N],b[N],c[N];…

【资料】华为硬件工程师手册与资料

资料目录&#xff1a; 华为硬件开发手册&#xff1a;1-159 华为数字电路&#xff1a;160-510 华为模拟电路&#xff1a;511-709 华为单板设计审查表&#xff1a;710-723 华为EMC资料&#xff1a;724-817 眼图知识简介&#xff1a;818-830 硬件工程师课程视频 硬件学习笔…

计算机基础知识-第10章-计算机网络概论

一、什么是计算机网络 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络管理软件及网络通信协议的管理和协调下&#xff0c;实现资源共享和信息传递的计算机系统。 要注意不…

Vue开发注意事项

后端返回的Long型数据太长&#xff08;比如身份证号&#xff09;&#xff0c;部分数据可能被前端变为0 解决方法&#xff1a;Long变为String 使用delete发送请求时&#xff0c;用 ?参数值&参数值 的形式 export const deletepatient (id) > {// console.log(id)//返…

jenkins+sonar配置

安装插件 Sonar Scanner 用于扫描项目 配置sonar scanner jenkins集成sonar 1、sonar生成token 生成完保存好&#xff0c;刷新后无法查看 2、jenkins配置全局凭据 3、jenkins配置系统设置

商业智能-BI

商业智能&#xff08; Business Intelligence &#xff0c; BI &#xff09;是企业对商业数据的搜集、管理和分析的系统过 程&#xff0c;目的是使企业的各级决策者获得知识或洞察力&#xff0c;帮助他们做出对企业更有利的决策。 商业智能技术并不是基础技术或者产品技术&a…

pytorch 查看 GPU 型号

import torch# 检查CUDA是否可用 if torch.cuda.is_available():print("CUDA is available!")# 还可以获取CUDA设备的数量device_count torch.cuda.device_count()print(f"Number of CUDA devices: {device_count}")# 获取第一块GPU的信息device torch.d…

2、ESP-WROOM-32开发板笔记

ESP32 是乐鑫开发的一系列低成本、低功耗的片上系统微控制器&#xff0c;具有 Wi-Fi 和蓝牙无线功能以及双核处理器。 目录 一、特点 二、硬件内存 三、支持外设 四、引脚定义 1、仅输入引脚 2、SPI闪存 3、电容式触摸 IO 4、ADC 5、DAC 6、RTC GPIO 7、PWM 8、I2C 9、SPI …

时间复杂度详解2——时间复杂度的计算

时间复杂度基本计算规则&#xff1a; 基本操作即只有常数项&#xff0c;认为其时间复杂度为O(1)顺序结构&#xff0c;时间复杂度按加法进行计算循环结构&#xff0c;时间复杂度按乘法进行计算分支结构&#xff0c;时间复杂度取最大值判断一个算法效率时&#xff0c;往往只需要…

第十二届蓝桥杯大赛软件赛省赛Java 大学 B 组题解

1、ASC public class Main {public static void main(String[] args) {System.out.println(

LeetCode- 合并两个有序数组

题目 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并…

Java | Leetcode Java题解之第17题电话号码的字母组合

题目&#xff1a; 题解&#xff1a; class Solution {public List<String> letterCombinations(String digits) {List<String> combinations new ArrayList<String>();if (digits.length() 0) {return combinations;}Map<Character, String> phoneM…

Linux的学习之路:7、yum与git

摘要 本章主要是说一下yum和git的操作 目录 摘要 一、什么是yum 二、yum三板斧 1、list 2、install 3、remove 三、怎么创建仓库 四、git三板斧 1、add 2、commit 3、push 4、pull 五、思维导图 一、什么是yum YUM是Yellowdog Updater Modified的简称&#xf…

芒果YOLOv5改进94:检测头篇DynamicHead为目标检测统一检测头:即插即用|DynamicHead检测头,尺度感知、空间感知、任务感知

该专栏完整目录链接: 芒果YOLOv5深度改进教程 该创新点:在原始的Dynamic Head的基础上,对核心部位进行了二次的改进,在 原论文 《尺度感知、空间感知、任务感知》 的基础上,在 通道感知 的层级上进行了增强,关注每个像素点的比重。 在自己的数据集上改进,有效涨点就可以…

Github 2024-04-12 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-04-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目6TypeScript项目2Cuda项目1C++项目1C项目1HTML项目1Jupyter Notebook项目1JavaScript项目1Python - 100天从新手到大师 创建周期:22…