vue3+PPTXjs 在线ppt预览

🕗 发布于 2024-10-04 16:01 powerpoint javascript 前端

- 使用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

原文地址：https://blog.csdn.net/xutongbao/article/details/142648777

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Leetcode: 0061-0070题速览
下一篇：加油站智能视频监控预警系统(AI识别烟火打电话抽烟) Python 和 OpenCV 库

滚雪球学Oracle[2.4讲]：创建Oracle数据库实例
在上期的内容中，我们深入讨论了Oracle Listener配置与管理，详细介绍了监听器的作用及其在数据库网络通信中的重要性。通过监听器的配置，客户端和数据库服务器得以实现有效的通信，确保数据库应用能
阅读更多2024-10-04
React第十章(useState)
useState是一个 React Hook，允许函数组件在内部管理状态。组件通常需要根据交互更改屏幕上显示的内容，例如点击某个按钮更改值，或者输入文本框中的内容，这些值被称为状态值也就是(state
阅读更多2024-10-04
STM32三种启动模式：【详细讲解】
BOOT 引脚的值在时被锁定。在重置后,由用户决定是如何设置 BOOT1 和 BOOT0 引脚,来选择需要的启动模式。
阅读更多2024-10-04
npx create-react-app react-basic 创建react 项目报错
npx create-react-app创建react 项目报错
阅读更多2024-10-04
（15）衰落信道模型作用于信号是相乘还是卷积
在使用衰落信道进行通信系统仿真时，有的资料中是用相乘的方法，有的资料中用的是卷积的方法。那么，衰落信道模型作用于传输信号时，是该用相乘还是卷积呢？下面针对该问题给出回答。
阅读更多2024-10-04
代码随想录：110、字符串接龙
bfs算最短路径
阅读更多2024-10-04
二叉树进阶学习——从中序和后续遍历序列构建二叉树
【代码】二叉树进阶学习——从中序和后续遍历序列构建二叉树。
阅读更多2024-10-04
Thinkphp/Laravel基于vue的实验室上机管理系统
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验
阅读更多2024-10-04
HTB：Included[WriteUP]
当 Web 应用程序在接收用户输入来包含文件时，如果没有对用户输入进行充分的验证和过滤，攻击者就有可能通过精心构造的输入，让应用程序包含服务器本地的文件。这种漏洞通常是由于开发人员在编写代码时没有充分
阅读更多2024-10-04
c# iTextSharp 读取PDF
【代码】c# iTextSharp 读取PDF。
阅读更多2024-10-04

vue3+PPTXjs 在线ppt预览

相关文章