vue3+PPTXjs 在线ppt预览

ops/2024/10/9 4:26:33/

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

<!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.pptxvar 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-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;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.valuepdfSrc.value = props.file;} else {// 如果不是字符串类型，则使用 URL.createObjectURL 方法创建一个指向该文件的 URL，并将其赋值给 pdfSrc.valuepdfSrc.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，并传入请求的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><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-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;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.valuepdfSrc.value = props.file;} else {// 如果不是字符串类型，则使用 URL.createObjectURL 方法创建一个指向该文件的 URL，并将其赋值给 pdfSrc.valuepdfSrc.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，并传入请求的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><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.ppmy.cn/ops/122982.html

相关文章

WPF下使用FreeRedis操作RedisStream实现简单的消息队列

WPF下使用FreeRedis操作RedisStream实现简单的消息队列

Redis Stream简介 Redis Stream是随着5.0版本发布的一种新的Redis数据类型： 高效消费者组：允许多个消费者组从同一数据流的不同部分消费数据，每个消费者组都能独立地处理消息，这样可以并行处理和提高效率。 阻塞操作：消费者可以设置阻塞操作，这样它们会在流中有新数据…
阅读更多...
Linux之Docker虚拟化部署

Linux之Docker虚拟化部署

上传docker安装包 解压安装包 将解压后的docker文件夹移动到/usr/local/文件夹下 docker 启动命令/usr/local/docker/dockerd 但是启动报错&#xff0c;意思是没有docker用户组 创建docker用户组&#xff0c;执行完会生成套接字文件 将套接字文件加入该用户组管理 第二个错误原…
阅读更多...
015 品牌关联分类

015 品牌关联分类

文章目录 后端CategoryBrandEntity.javaCategoryBrandController.javaCategoryBrandServiceImpl.javaCategoryServiceImpl.javaBrandServiceImpl.java删除 npm install pubsub-jsnpm install --save pubsub-js这个错误是由于在尝试安装 pubsub-js 时&#xff0c;npm 发现了项目…
阅读更多...
netty之Netty集群部署实现跨服务端通信的落地方案

netty之Netty集群部署实现跨服务端通信的落地方案

前言 在一些小型用户体量的socket服务内&#xff0c;仅部署单台机器就可以满足业务需求。但当遇到一些中大型用户体量的服务时&#xff0c;就需要考虑讲Netty按照集群方式部署&#xff0c;以更好的满足业务诉求。但Netty部署集群后都会遇到跨服务端怎么通信&#xff0c;也就是有…
阅读更多...
MKV转MP4丨FFmpeg的简单命令使用——视频格式转换

MKV转MP4丨FFmpeg的简单命令使用——视频格式转换

MKV是一种视频封装格式&#xff0c;很好用&#xff0c;也是OBS的默认推荐录制格式&#xff0c;因为不会突然断电关机而导致整个视频录制文件丢失。 但是MKV无法直接导入PR中剪辑&#xff0c;最直接的方法是将MKV转换为MP4格式&#xff0c;最方便且安全无损的转换方法便是用FFmp…
阅读更多...
面试（十）

面试（十）

目录 一. 单元测试 二. FreeRTOS和裸机哪个实时性好&#xff1f; 三. 怎么判断某个程序的运行时间 四. 函数指针 五. 全局变量被线程使用冲突 5.1 使用互斥锁 5.2 使用读写锁 5.3 使用原子操作 六. 局部变量没有初始化是什么值 七. uint_8 n 255 , n等于多少 八. …
阅读更多...
【Linux第五课-进程概念下】环境变量、程序地址空间

【Linux第五课-进程概念下】环境变量、程序地址空间

目录 环境变量main参数 --- 命令行参数环境变量环境变量特性 --- 命令行操作main函数的参数获取环境变量environ获取环境变量getenv()获取环境变量unset移除本地变量或环境变量set显示本地变量 代码获取和设置环境变量 本地变量 程序地址空间什么是进程地址空间为什么有地址空间…
阅读更多...
C++学习笔记----8、掌握类与对象（六）---- 操作符重载（1）

C++学习笔记----8、掌握类与对象（六）---- 操作符重载（1）

经常在对象上执行如相加&#xff0c;比较&#xff0c;文件传输等操作。例如&#xff0c;spreadsheet只有在可以在上面执行自述运算才有用&#xff0c;比如对整行的单元格求和。所有这些都可以通过重载操作符来完成。 许多人发现操作符重载的语法复杂而令人迷惑。至少一开始是这…
阅读更多...
最新文章

Copyright @ 2022~2023