vue3+PPTXjs 在线ppt预览

徐同保2024-10-01 9:00

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

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

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

javascript 复制代码 
URL.createObjectURL(file);

ppt/Index.vue:

javascript 复制代码 
<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:

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>
javascript 复制代码 
<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>
javascript 复制代码 
<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

相关推荐
小阮的学习笔记1 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 =￣ω￣=2 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck6 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习！27 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。32 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼39 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093342 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解