vue3+PPTXjs 在线ppt预览

news2024/11/25 19:53:53

- 使用PPTXjs做ppt预览，有完整的代码包，基于jquery

- vue3使用iframe引入用于预览ppt的网页，通过url参数传递需要预览的ppt链接

- 通过网页选择文件上传也可以通过下面的函数把文件转换成链接，实现在文件上传到服务器前就可以预览

URL.createObjectURL(file);

ppt/Index.vue:

<template>
	<div class="page-container m-ppt-wrap" id="page-contaninder" ref="pageContaninderRef">
		<div>
			<input type="file" @change="handleFileChange" />
		</div>
		<iframe class="m-iframe" :src="iframeUrl"></iframe>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

console.log(location)
const iframeUrl = ref(
	`${location.origin}/dist/ppt/index.html?file=${location.origin}/dist/ppt/1.pptx`
);

const handleFileChange = (e: any) => {
	let file: any = e.target.files[0];
	let fileUrl = URL.createObjectURL(file);
	let url = `${location.origin}/dist/ppt/index.html?file=${fileUrl}`;
	iframeUrl.value = url;
};
</script>

<style lang="scss" scoped>
.m-ppt-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.m-iframe {
	width: 100%;
	flex: 1;
	border: none;
}
</style>

public/ppt:

https://download.csdn.net/download/xutongbao/89819342

https://pptx.js.org/index.html

index.html:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>PPTXjs - Meshesha</title>

		<link rel="stylesheet" href="./css/pptxjs.css" />
		<link rel="stylesheet" href="./css/nv.d3.min.css" />

		<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="./js/jszip.min.js"></script>
		<script type="text/javascript" src="./js/filereader.js"></script>
		<script type="text/javascript" src="./js/d3.min.js"></script>
		<script type="text/javascript" src="./js/nv.d3.min.js"></script>
		<script type="text/javascript" src="./js/pptxjs.js"></script>
		<script type="text/javascript" src="./js/divs2slides.js"></script>

		<script type="text/javascript" src="./js/jquery.fullscreen-min.js"></script>

		<script type="text/javascript">
			$(function () {
				var oldWidth,
					oldMargin,
					isFullscreenMode = false;
				$("#fullscreen-btn").on("click", function () {
					if (!isFullscreenMode) {
						oldWidth = $("#result .slide").css("width");
						oldMargin = $("#result .slide").css("margin");
						$("#result .slide").css({
							width: "99%",
							margin: "0 auto"
						});
						$("#result").toggleFullScreen();
						isFullscreenMode = true;
					} else {
						$("#result .slide").css({
							width: oldWidth,
							margin: oldMargin
						});
						$("#result").toggleFullScreen();
						isFullscreenMode = false;
					}
				});
				$(document).bind("fullscreenchange", function () {
					if (!$(document).fullScreen()) {
						$("#result .slide").css({
							width: oldWidth,
							margin: oldMargin
						});
					}
				});
			});
		</script>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
			}
			#warper {
				margin-right: auto;
				margin-left: auto;
				width: 900px;
			}
		</style>
	</head>
	<body>
		<div id="warper">
			<input id="uploadFileInput" type="file" />
			<br /><br />
			<div id="container">
				<div id="result"></div>
			</div>
		</div>
		<script>
			var pptxFileUrl = "http://localhost:5173/dist/ppt/2.pptx";
			//http://localhost:5173/dist/ppt/index.html?file=http://localhost:5173/dist/ppt/1.pptx
			var pptxFileUrlValue = window.location.search.substr(1).split("file=")[1];
			if (pptxFileUrlValue) {
				pptxFileUrl = pptxFileUrlValue;
			}
			$("#result").pptxToHtml({
				pptxFileUrl: pptxFileUrl,
				fileInputId: "uploadFileInput",
				slideMode: false,
				keyBoardShortCut: false,
				slideModeConfig: {
					//on slide mode (slideMode: true)
					first: 1,
					nav: false /** true,false : show or not nav buttons*/,
					navTxtColor: "white" /** color */,
					navNextTxt: "&#8250;", //">"
					navPrevTxt: "&#8249;", //"<"
					showPlayPauseBtn: false /** true,false */,
					keyBoardShortCut: false /** true,false */,
					showSlideNum: false /** true,false */,
					showTotalSlideNum: false /** true,false */,
					autoSlide: false /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */,
					randomAutoSlide: false /** true,false ,autoSlide:true */,
					loop: false /** true,false */,
					background: "black" /** false or color*/,
					transition:
						"default" /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */,
					transitionTime: 1 /** transition time in seconds */
				}
			});
		</script>
	</body>
</html>

<template>
	<div class="m-wrap">
		<div v-if="extension === 'docx' || extension === 'doc'" style="height:100%">
			<vue-office-docx :src="docx" style="height: 100%; margin: 0; padding: 0" />
		</div>
		<div v-if="extension === 'xlsx' || extension === 'xls'" style="height:100%">
			<vue-office-excel :src="excel" style="height: 100%" />
		</div>
		<div class="m-iframe-wrap" v-show="extension === 'pdf'">
			<iframe class="m-iframe" v-show="pdfSrc" :src="pdfSrc" width="100%"></iframe>
		</div>
		<div class="m-iframe-wrap" v-show="extension === 'pptx' || extension === 'ppt'">
			<iframe class="m-iframe" v-show="pptUrl" :src="pptUrl" width="100%" height="100%"></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 pptUrl:any = ref(null);

const readFile = async () => {
	// 获取选中的文件
	//@ts-ignore
	const 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;
		case "pptx":
		case "ppt":
			// 读取Excel文件
			readPptFile(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.value
			pdfSrc.value = props.file;
		} else {
			// 如果不是字符串类型，则使用 URL.createObjectURL 方法创建一个指向该文件的 URL，并将其赋值给 pdfSrc.value
			pdfSrc.value = URL.createObjectURL(file);
		}
	}
};

const readPptFile = async (file: any) => {
	if (file) {
		pptUrl.value = `${location.origin}/dist/ppt/index.html?file=${URL.createObjectURL(file)}` ;
	}
};

// url地址转发为文件流
const getFileStream = (url: string) => {
	return new Promise((resolve, reject) => {
		// 创建一个XMLHttpRequest对象
		const xhr = new XMLHttpRequest();
		// 设置请求方法为GET，并传入请求的URL
		xhr.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>

<style scoped lang="scss">
.m-wrap{display: flex;flex-direction: column; height: 100%}
.m-iframe-wrap{flex: 1;overflow-y: auto;}
.m-iframe{border: none;height: 100%;}
</style>
<template>
	<div class="m-wrap">
		<div v-if="extension === 'docx' || extension === 'doc'" style="height:100%">
			<vue-office-docx :src="docx" style="height: 100%; margin: 0; padding: 0" />
		</div>
		<div v-if="extension === 'xlsx' || extension === 'xls'" style="height:100%">
			<vue-office-excel :src="excel" style="height: 100%" />
		</div>
		<div class="m-iframe-wrap" v-show="extension === 'pdf'">
			<iframe class="m-iframe" v-show="pdfSrc" :src="pdfSrc" width="100%"></iframe>
		</div>
		<div class="m-iframe-wrap" v-show="extension === 'pptx' || extension === 'ppt'">
			<iframe class="m-iframe" v-show="pptUrl" :src="pptUrl" width="100%" height="100%"></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 pptUrl:any = ref(null);

const readFile = async () => {
	// 获取选中的文件
	//@ts-ignore
	const 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;
		case "pptx":
		case "ppt":
			// 读取Excel文件
			readPptFile(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.value
			pdfSrc.value = props.file;
		} else {
			// 如果不是字符串类型，则使用 URL.createObjectURL 方法创建一个指向该文件的 URL，并将其赋值给 pdfSrc.value
			pdfSrc.value = URL.createObjectURL(file);
		}
	}
};

const readPptFile = async (file: any) => {
	if (file) {
		pptUrl.value = `${location.origin}/dist/ppt/index.html?file=${URL.createObjectURL(file)}` ;
	}
};

// url地址转发为文件流
const getFileStream = (url: string) => {
	return new Promise((resolve, reject) => {
		// 创建一个XMLHttpRequest对象
		const xhr = new XMLHttpRequest();
		// 设置请求方法为GET，并传入请求的URL
		xhr.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>

<style scoped lang="scss">
.m-wrap{display: flex;flex-direction: column; height: 100%}
.m-iframe-wrap{flex: 1;overflow-y: auto;}
.m-iframe{border: none;height: 100%;}
</style>

人工智能学习网站

https://chat.xutongbao.top

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【深度强化学习】DDPG实现的4个细节（OUNoise等）

【深度强化学习】DDPG实现的4个细节（OUNoise等）

文章目录 前言一、论文内容简述创新点&#xff08;特点&#xff0c;与DQN的区别&#xff09;&#xff1a;可借鉴参数&#xff1a;细节补充&#xff1a; 二、细节1&#xff1a;weight_decay原理代码 三、细节2&#xff1a;OUNoise原理代码 四、细节3&#xff1a;ObsNorm原理代码…
阅读更多...
PostgreSQL分区表,实战细节满满

PostgreSQL分区表,实战细节满满

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、My…
阅读更多...
茄子病虫害数据集。四类：果肉腐烂、蛀虫、健康、黄斑病。4000张图片，已经按照8:2的比例划分好训练集、验证集 txt格式 含类别yaml文件 已经标注好

茄子病虫害数据集。四类：果肉腐烂、蛀虫、健康、黄斑病。4000张图片，已经按照8:2的比例划分好训练集、验证集 txt格式 含类别yaml文件 已经标注好

茄子病虫害数据集。可用于筛选茄子品质、质量&#xff0c;训练采摘机器人视觉算法模型……数据集大部分图片来源于真实果园拍摄的图片&#xff08;生长在果树之上的&#xff09;&#xff0c;图片分辨率高&#xff0c;数据集分为四类&#xff1a;果肉腐烂、蛀虫、健康、黄斑病。…
阅读更多...
如何使用ssm实现基于Java的民宿预订管理系统的设计与实现

如何使用ssm实现基于Java的民宿预订管理系统的设计与实现

TOC ssm773基于Java的民宿预订管理系统的设计与实现jsp 绪论 1.1课题研究背景意义 随着科技的发展&#xff0c;计算机的应用&#xff0c;人们的生活方方面面都和互联网密不可分。计算机的普及使得人们的生活更加方便快捷&#xff0c;网络也遍及到我们生活的每个角落&#x…
阅读更多...
Vue - 打包部署

Vue - 打包部署

vscode找到NPM脚本&#xff0c;点击build。 目录下出现dist目录则表示安装成功。 安装Nginxnginx: download 目录用途conf配置文件目录html静态资源文件目录logs日志文件目录temp临时文件目录 将刚刚打包好的文件放到html目录下。 点击nginx.exe&#xff0c;用localhost:默认…
阅读更多...
Windows应急响应-QQ巨盗病毒

Windows应急响应-QQ巨盗病毒

文章目录 病毒背景样本分析开启监控感染病毒分析病毒行为C盘文件监控D盘文件监控进程监控排查服务排查启动项排查 查杀1.杀掉进程2.异常服务3.映像劫持处理4.hosts文件处理5.D盘文件删除6.其他异常排查 重启排查 病毒背景 简介&#xff1a;Win32.PSWTroj.QQPass&#xff0c;名…
阅读更多...
模拟退火算法简介

模拟退火算法简介

什么是模拟退火算法&#xff1f; 模拟退火算法&#xff08;Simulated Annealing&#xff0c;SA&#xff09;是一种基于随机化搜索的优化算法&#xff0c;灵感来源于金属退火过程。在金属制造中&#xff0c;金属被加热到高温并缓慢冷却&#xff0c;这一过程可以减少内部缺陷&am…
阅读更多...
【前端】-音乐播放器（源代码和结构讲解，大家可以将自己喜欢的歌曲添加到数据当中，js实现页面动态显示音乐）

【前端】-音乐播放器（源代码和结构讲解，大家可以将自己喜欢的歌曲添加到数据当中，js实现页面动态显示音乐）

前言&#xff1a;音乐播放器是前端开发中的一个经典项目&#xff0c;通过它可以掌握很多核心技术&#xff0c;如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能&#xff0c;还能让开发者深入理解JavaScript与HTML的协同作用。 页面展示&#xff1…
阅读更多...
精准选择大模型：消费品行业的营销与体验创新之路

精准选择大模型：消费品行业的营销与体验创新之路

在消费品行业&#xff0c;大模型技术的引入正逐渐从一个新兴趋势转变为行业标配。随着人工智能的快速发展&#xff0c;特别是OpenAI等领军企业推出的创新技术&#xff0c;如Sora&#xff0c;大模型在市场营销、消费者行为分析、个性化推荐等方面展现出巨大潜力。然而&#xff0…
阅读更多...
基础算法（5）——位运算

基础算法（5）——位运算

1. 常见位运算总结 1) 基础位运算 2) 给一个数 n&#xff0c;确定它的二进制表示中的第 x 位是 0 还是 1 3) 将一个数 n 的二进制表示的第 x 位修改成 1 4) 将一个数 n 的二进制表示的第 x 位修改成 0 5) 位图的思想 位图的本质就是 哈希表 6) 提取一个数 n 二进制表示中最右…
阅读更多...
如 有 任 何 问 题 ，请 及 时 联 系 我 们 反 馈 ！

如 有 任 何 问 题 ，请 及 时 联 系 我 们 反 馈 ！

如有任何问题&#xff0c; 请及时联系我们反馈 !https://support.qq.com/products/671606 如有任何问题&#xff0c; 请及时联系我们反馈 !
阅读更多...
Bluetooth Channel Sounding中关于CS Procedure的详细介绍

Bluetooth Channel Sounding中关于CS Procedure的详细介绍

目录 BLE CS 过程定义&#xff1a; BLE CS 过程的组成部分 开始一个BLE CS 过程 与BLE CS过程相关的参数设置 BLE CS 过程定义&#xff1a; BLE 的CS特性包含一组LL层和空口协议的组合过程&#xff0c;该过程可以使得两个BLE 设备以紧密互锁的方式&#xff0c;在多个信道上…
阅读更多...
Ubuntu 上安装 MySQL 并且实现远程登录

Ubuntu 上安装 MySQL 并且实现远程登录

目录 1. 安装MySQL 2. 安全配置MySQL 3. 配置MySQL远程登录 3.1. 允许远程连接 3.2. 重启MySQL服务 3.3. 为用户分配远程访问权限 进入MySQL后&#xff0c;执行以下命令&#xff1a; 3.4. 创建新用户 3.5. 授予权限 3.6. 刷新权限 3.7. 退出 MySQL 控制台 4. 配置防火…
阅读更多...
2024.9月29日~10月6日 SSM框架项目-《电信资费管理系统》

2024.9月29日~10月6日 SSM框架项目-《电信资费管理系统》

一、数据库介绍&#xff1a; 1、account&#xff1a;帐务信息表 2、admin_info&#xff1a;管理员信息表 3、admin_role&#xff1a;管理员角色信息表 4、cost&#xff1a;资费信息表 5、privilege_info&#xff1a;权限信息表 6、role_info&#xff1a;角色信息表 7、role_pri…
阅读更多...
在CentOS7上安装mysql

在CentOS7上安装mysql

目录 1.下载安装文件 2.上传到CentOS7上 3.解压MySQL文件 4.清理系统中残留的MySQL 5.安装MySQL 6.启动MySQL 并 设置开机自启动 7.查找临时密码&#xff0c;并修改密码 注意&#xff1a; 教程&#xff1a;在Linux上安装mysql&#xff08;超详细版&#xff09;_哔哩哔哩…
阅读更多...
人工智能新闻和发展 （24001）- By 10/4/2024

人工智能新闻和发展 （24001）- By 10/4/2024

1. 谷歌增强了搜索中的人工智能&#xff0c;允许对图像进行语音提问。 Google adding AI to answer voiced questions about images | AP NewsGoogle is pumping more artificial intelligence into its search engine. New features will enable people to voice questions a…
阅读更多...
[C#]使用onnxruntime部署yolov11-onnx实例分割模型

[C#]使用onnxruntime部署yolov11-onnx实例分割模型

【官方框架地址】 https://github.com/ultralytics/ultralytics.git 【算法介绍】 在C#中使用ONNX Runtime部署YOLOv11-ONNX实例分割模型&#xff0c;涉及到模型的加载、数据预处理、模型推理和后处理几个关键步骤。 首先&#xff0c;需要确保已经安装了ONNX Runtime的NuGe…
阅读更多...
【数据结构】【链表代码】随机链表的复制

【数据结构】【链表代码】随机链表的复制

/*** Definition for a Node.* struct Node {* int val;* struct Node *next;* struct Node *random;* };*/typedef struct Node Node; struct Node* copyRandomList(struct Node* head) {if(headNULL)return NULL;//1.拷贝结点&#xff0c;连接到原结点的后面Node…
阅读更多...
[Linux] 进程创建、退出和等待

[Linux] 进程创建、退出和等待

标题&#xff1a;[Linux] 进程创建、退出和等待 个人主页水墨不写bug &#xff08;图片来源于AI&#xff09; 目录 一、进程创建fork&#xff08;&#xff09; 1&#xff09; fork的返回值&#xff1a; 2&#xff09;写时拷贝 ​编辑3&#xff09;fork常规用法 4&#xff…
阅读更多...
目标侦测划分数据集代码---＞voc

目标侦测划分数据集代码---＞voc

代码如下&#xff1a; import glob import os import random import shutil # 划分比例 p3/4#训练集 xmlpathE:\\shujuji\\MASK\\Annotations\\* imgpathE:\\shujuji\\MASK\\JPEGImages\\* xmlpathsglob.glob(xmlpath) imgpathsglob.glob(imgpath) my_list[i for i in range(l…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023