qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 数据库 › Oracle › vue3+PPTXjs 在线ppt预览

vue3+PPTXjs 在线ppt预览

[复制链接]
发表于 2026-1-15 03:02:04 | 显示全部楼层 |阅读模式
- 使用PPTXjs做ppt预览，有完备的代码包，基于jquery
- vue3使用iframe引入用于预览ppt的网页，通过url参数通报必要预览的ppt链接
- 通过网页选择文件上传也可以通过下面的函数把文件转换成链接，实如今文件上传到服务器前就可以预览
  1. URL.createObjectURL(file);
复制代码



ppt/Index.vue:
  1. <template>
  2.         <div class="page-container m-ppt-wrap" id="page-contaninder" ref="pageContaninderRef">
  3.                 <div>
  4.                         <input type="file" @change="handleFileChange" />
  5.                 </div>
  6.                 <iframe class="m-iframe" :src="iframeUrl"></iframe>
  7.         </div>
  8. </template>
  10. <script setup lang="ts">
  11. import { ref } from "vue";
  13. console.log(location)
  14. const iframeUrl = ref(
  15.         `${location.origin}/dist/ppt/index.html?file=${location.origin}/dist/ppt/1.pptx`
  16. );
  18. const handleFileChange = (e: any) => {
  19.         let file: any = e.target.files[0];
  20.         let fileUrl = URL.createObjectURL(file);
  21.         let url = `${location.origin}/dist/ppt/index.html?file=${fileUrl}`;
  22.         iframeUrl.value = url;
  23. };
  24. </script>
  26. <style lang="scss" scoped>
  27. .m-ppt-wrap {
  28.         display: flex;
  29.         flex-direction: column;
  30.         height: 100%;
  31. }
  32. .m-iframe {
  33.         width: 100%;
  34.         flex: 1;
  35.         border: none;
  36. }
  37. </style>
复制代码

public/ppt:
https://download.csdn.net/download/xutongbao/89819342
https://pptx.js.org/index.html

index.html:
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.                 <title>PPTXjs - Meshesha</title>
  8.                 <link rel="stylesheet" href="./css/pptxjs.css" />
  9.                 <link rel="stylesheet" href="./css/nv.d3.min.css" />
  11.                 <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
  12.                 <script type="text/javascript" src="./js/jszip.min.js"></script>
  13.                 <script type="text/javascript" src="./js/filereader.js"></script>
  14.                 <script type="text/javascript" src="./js/d3.min.js"></script>
  15.                 <script type="text/javascript" src="./js/nv.d3.min.js"></script>
  16.                 <script type="text/javascript" src="./js/pptxjs.js"></script>
  17.                 <script type="text/javascript" src="./js/divs2slides.js"></script>
  19.                 <script type="text/javascript" src="./js/jquery.fullscreen-min.js"></script>
  21.                 <script type="text/javascript">
  22.                         $(function () {
  23.                                 var oldWidth,
  24.                                         oldMargin,
  25.                                         isFullscreenMode = false;
  26.                                 $("#fullscreen-btn").on("click", function () {
  27.                                         if (!isFullscreenMode) {
  28.                                                 oldWidth = $("#result .slide").css("width");
  29.                                                 oldMargin = $("#result .slide").css("margin");
  30.                                                 $("#result .slide").css({
  31.                                                         width: "99%",
  32.                                                         margin: "0 auto"
  33.                                                 });
  34.                                                 $("#result").toggleFullScreen();
  35.                                                 isFullscreenMode = true;
  36.                                         } else {
  37.                                                 $("#result .slide").css({
  38.                                                         width: oldWidth,
  39.                                                         margin: oldMargin
  40.                                                 });
  41.                                                 $("#result").toggleFullScreen();
  42.                                                 isFullscreenMode = false;
  43.                                         }
  44.                                 });
  45.                                 $(document).bind("fullscreenchange", function () {
  46.                                         if (!$(document).fullScreen()) {
  47.                                                 $("#result .slide").css({
  48.                                                         width: oldWidth,
  49.                                                         margin: oldMargin
  50.                                                 });
  51.                                         }
  52.                                 });
  53.                         });
  54.                 </script>
  55.                 <style>
  56.                         html,
  57.                         body {
  58.                                 margin: 0;
  59.                                 padding: 0;
  60.                         }
  61.                         #warper {
  62.                                 margin-right: auto;
  63.                                 margin-left: auto;
  64.                                 width: 900px;
  65.                         }
  66.                 </style>
  67.         </head>
  68.         <body>
  69.                 <div id="warper">
  70.                         <input id="uploadFileInput" type="file" />
  71.                         <br /><br />
  72.                         <div id="container">
  73.                                 <div id="result"></div>
  74.                         </div>
  75.                 </div>
  76.                 <script>
  77.                         var pptxFileUrl = "http://localhost:5173/dist/ppt/2.pptx";
  78.                         //http://localhost:5173/dist/ppt/index.html?file=http://localhost:5173/dist/ppt/1.pptx
  79.                         var pptxFileUrlValue = window.location.search.substr(1).split("file=")[1];
  80.                         if (pptxFileUrlValue) {
  81.                                 pptxFileUrl = pptxFileUrlValue;
  82.                         }
  83.                         $("#result").pptxToHtml({
  84.                                 pptxFileUrl: pptxFileUrl,
  85.                                 fileInputId: "uploadFileInput",
  86.                                 slideMode: false,
  87.                                 keyBoardShortCut: false,
  88.                                 slideModeConfig: {
  89.                                         //on slide mode (slideMode: true)
  90.                                         first: 1,
  91.                                         nav: false /** true,false : show or not nav buttons*/,
  92.                                         navTxtColor: "white" /** color */,
  93.                                         navNextTxt: "&#8250;", //">"
  94.                                         navPrevTxt: "&#8249;", //"<"
  95.                                         showPlayPauseBtn: false /** true,false */,
  96.                                         keyBoardShortCut: false /** true,false */,
  97.                                         showSlideNum: false /** true,false */,
  98.                                         showTotalSlideNum: false /** true,false */,
  99.                                         autoSlide: false /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */,
  100.                                         randomAutoSlide: false /** true,false ,autoSlide:true */,
  101.                                         loop: false /** true,false */,
  102.                                         background: "black" /** false or color*/,
  103.                                         transition:
  104.                                                 "default" /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */,
  105.                                         transitionTime: 1 /** transition time in seconds */
  106.                                 }
  107.                         });
  108.                 </script>
  109.         </body>
  110. </html>
复制代码
  1. <template>
  2.         <div class="m-wrap">
  3.                 <div v-if="extension === 'docx' || extension === 'doc'" style="height:100%">
  4.                         <vue-office-docx :src="docx" style="height: 100%; margin: 0; padding: 0" />
  5.                 </div>
  6.                 <div v-if="extension === 'xlsx' || extension === 'xls'" style="height:100%">
  7.                         <vue-office-excel :src="excel" style="height: 100%" />
  8.                 </div>
  9.                 <div class="m-iframe-wrap" v-show="extension === 'pdf'">
  10.                         <iframe class="m-iframe" v-show="pdfSrc" :src="pdfSrc" width="100%"></iframe>
  11.                 </div>
  12.                 <div class="m-iframe-wrap" v-show="extension === 'pptx' || extension === 'ppt'">
  13.                         <iframe class="m-iframe" v-show="pptUrl" :src="pptUrl" width="100%" height="100%"></iframe>
  14.                 </div>
  15.         </div>
  16. </template>
  17. <script lang="ts" name="cl-file-viewer" setup>
  18. import { ref, watch } from "vue";
  19. import VueOfficeExcel from "@vue-office/excel";
  20. import VueOfficeDocx from "@vue-office/docx";
  21. import "@vue-office/excel/lib/index.css";
  22. import "@vue-office/docx/lib/index.css";
  24. const props = defineProps({
  25.         fileType: {
  26.                 type: String,
  27.                 default: "file"
  28.         }, // 文件类型
  29.         file: {
  30.                 type: Object,
  31.                 default: null
  32.         } //文件流 或者文件地址
  33. });
  35. // 获取文件扩展名
  36. const extension = ref("");
  37. const docx = ref("");
  38. const excel = ref("");
  39. const pdfSrc:any = ref(null);
  40. const pptUrl:any = ref(null);
  42. const readFile = async () => {
  43.         // 获取选中的文件
  44.         //@ts-ignore
  45.         const file:any = props.fileType === "file" ? props.file : getFileStream(props.file);
  46.         if (!file) {
  47.                 return;
  48.         }
  50.         // 获取文件扩展名
  51.         extension.value = file.name.split(".").pop();
  53.         // 根据文件扩展名进行处理
  54.         switch (extension.value) {
  55.                 case "docx":
  56.                 case "doc":
  57.                         // 读取Word文件
  58.                         readWordFile(file);
  59.                         break;
  60.                 case "xlsx":
  61.                 case "xls":
  62.                         // 读取Excel文件
  63.                         readExcelFile(file);
  64.                         break;
  65.                 case "pdf":
  66.                         // 读取PDF文件
  67.                         readPdfFile(file);
  68.                         break;
  69.                 case "pptx":
  70.                 case "ppt":
  71.                         // 读取Excel文件
  72.                         readPptFile(file);
  73.                         break;
  74.                 default:
  75.                         // 不支持的文件类型
  76.                         alert("Unsupported file type");
  77.         }
  78. };
  79. const readWordFile = (file: any) => {
  80.         docx.value = URL.createObjectURL(file);
  81. };
  83. const readExcelFile = (file: any) => {
  84.         excel.value = URL.createObjectURL(file);
  85. };
  87. const readPdfFile = async (file: any) => {
  88.         if (file) {
  89.                 // 判断传入的 file 参数是否为字符串类型
  90.                 if (props.file instanceof String) {
  91.                         // 如果是字符串类型，则将其赋值给 pdfSrc.value
  92.                         pdfSrc.value = props.file;
  93.                 } else {
  94.                         // 如果不是字符串类型，则使用 URL.createObjectURL 方法创建一个指向该文件的 URL，并将其赋值给 pdfSrc.value
  95.                         pdfSrc.value = URL.createObjectURL(file);
  96.                 }
  97.         }
  98. };
  100. const readPptFile = async (file: any) => {
  101.         if (file) {
  102.                 pptUrl.value = `${location.origin}/dist/ppt/index.html?file=${URL.createObjectURL(file)}` ;
  103.         }
  104. };
  106. // url地址转发为文件流
  107. const getFileStream = (url: string) => {
  108.         return new Promise((resolve, reject) => {
  109.                 // 创建一个XMLHttpRequest对象
  110.                 const xhr = new XMLHttpRequest();
  111.                 // 设置请求方法为GET，并传入请求的URL
  112.                 xhr.open("GET", url);
  113.                 // 设置响应类型为blob，以便能够处理二进制数据
  114.                 xhr.responseType = "blob";
  115.                 // 当请求加载完成时，调用resolve方法并将响应数据作为参数传入
  116.                 xhr.onload = () => resolve(xhr.response);
  117.                 // 当请求发生错误时，调用reject方法并将错误信息作为参数传入
  118.                 xhr.onerror = (err) => reject(err);
  119.         });
  120. };
  122. // 初始化
  123. watch(
  124.         () => props.file,
  125.         (newValue, oldValue) => {
  126.                 if (newValue && newValue != oldValue) {
  127.                         nextTick(() => {
  128.                                 readFile();
  129.                         });
  130.                 }
  131.         },
  132.         { immediate: true }
  133. );
  134. </script>
  136. <style scoped lang="scss">
  137. .m-wrap{display: flex;flex-direction: column; height: 100%}
  138. .m-iframe-wrap{flex: 1;overflow-y: auto;}
  139. .m-iframe{border: none;height: 100%;}
  140. </style>
复制代码
  1. <template>
  2.         <div class="m-wrap">
  3.                 <div v-if="extension === 'docx' || extension === 'doc'" style="height:100%">
  4.                         <vue-office-docx :src="docx" style="height: 100%; margin: 0; padding: 0" />
  5.                 </div>
  6.                 <div v-if="extension === 'xlsx' || extension === 'xls'" style="height:100%">
  7.                         <vue-office-excel :src="excel" style="height: 100%" />
  8.                 </div>
  9.                 <div class="m-iframe-wrap" v-show="extension === 'pdf'">
  10.                         <iframe class="m-iframe" v-show="pdfSrc" :src="pdfSrc" width="100%"></iframe>
  11.                 </div>
  12.                 <div class="m-iframe-wrap" v-show="extension === 'pptx' || extension === 'ppt'">
  13.                         <iframe class="m-iframe" v-show="pptUrl" :src="pptUrl" width="100%" height="100%"></iframe>
  14.                 </div>
  15.         </div>
  16. </template>
  17. <script lang="ts" name="cl-file-viewer" setup>
  18. import { ref, watch } from "vue";
  19. import VueOfficeExcel from "@vue-office/excel";
  20. import VueOfficeDocx from "@vue-office/docx";
  21. import "@vue-office/excel/lib/index.css";
  22. import "@vue-office/docx/lib/index.css";
  24. const props = defineProps({
  25.         fileType: {
  26.                 type: String,
  27.                 default: "file"
  28.         }, // 文件类型
  29.         file: {
  30.                 type: Object,
  31.                 default: null
  32.         } //文件流 或者文件地址
  33. });
  35. // 获取文件扩展名
  36. const extension = ref("");
  37. const docx = ref("");
  38. const excel = ref("");
  39. const pdfSrc:any = ref(null);
  40. const pptUrl:any = ref(null);
  42. const readFile = async () => {
  43.         // 获取选中的文件
  44.         //@ts-ignore
  45.         const file:any = props.fileType === "file" ? props.file : getFileStream(props.file);
  46.         if (!file) {
  47.                 return;
  48.         }
  50.         // 获取文件扩展名
  51.         extension.value = file.name.split(".").pop();
  53.         // 根据文件扩展名进行处理
  54.         switch (extension.value) {
  55.                 case "docx":
  56.                 case "doc":
  57.                         // 读取Word文件
  58.                         readWordFile(file);
  59.                         break;
  60.                 case "xlsx":
  61.                 case "xls":
  62.                         // 读取Excel文件
  63.                         readExcelFile(file);
  64.                         break;
  65.                 case "pdf":
  66.                         // 读取PDF文件
  67.                         readPdfFile(file);
  68.                         break;
  69.                 case "pptx":
  70.                 case "ppt":
  71.                         // 读取Excel文件
  72.                         readPptFile(file);
  73.                         break;
  74.                 default:
  75.                         // 不支持的文件类型
  76.                         alert("Unsupported file type");
  77.         }
  78. };
  79. const readWordFile = (file: any) => {
  80.         docx.value = URL.createObjectURL(file);
  81. };
  83. const readExcelFile = (file: any) => {
  84.         excel.value = URL.createObjectURL(file);
  85. };
  87. const readPdfFile = async (file: any) => {
  88.         if (file) {
  89.                 // 判断传入的 file 参数是否为字符串类型
  90.                 if (props.file instanceof String) {
  91.                         // 如果是字符串类型，则将其赋值给 pdfSrc.value
  92.                         pdfSrc.value = props.file;
  93.                 } else {
  94.                         // 如果不是字符串类型，则使用 URL.createObjectURL 方法创建一个指向该文件的 URL，并将其赋值给 pdfSrc.value
  95.                         pdfSrc.value = URL.createObjectURL(file);
  96.                 }
  97.         }
  98. };
  100. const readPptFile = async (file: any) => {
  101.         if (file) {
  102.                 pptUrl.value = `${location.origin}/dist/ppt/index.html?file=${URL.createObjectURL(file)}` ;
  103.         }
  104. };
  106. // url地址转发为文件流
  107. const getFileStream = (url: string) => {
  108.         return new Promise((resolve, reject) => {
  109.                 // 创建一个XMLHttpRequest对象
  110.                 const xhr = new XMLHttpRequest();
  111.                 // 设置请求方法为GET，并传入请求的URL
  112.                 xhr.open("GET", url);
  113.                 // 设置响应类型为blob，以便能够处理二进制数据
  114.                 xhr.responseType = "blob";
  115.                 // 当请求加载完成时，调用resolve方法并将响应数据作为参数传入
  116.                 xhr.onload = () => resolve(xhr.response);
  117.                 // 当请求发生错误时，调用reject方法并将错误信息作为参数传入
  118.                 xhr.onerror = (err) => reject(err);
  119.         });
  120. };
  122. // 初始化
  123. watch(
  124.         () => props.file,
  125.         (newValue, oldValue) => {
  126.                 if (newValue && newValue != oldValue) {
  127.                         nextTick(() => {
  128.                                 readFile();
  129.                         });
  130.                 }
  131.         },
  132.         { immediate: true }
  133. );
  134. </script>
  136. <style scoped lang="scss">
  137. .m-wrap{display: flex;flex-direction: column; height: 100%}
  138. .m-iframe-wrap{flex: 1;overflow-y: auto;}
  139. .m-iframe{border: none;height: 100%;}
  140. </style>
复制代码



人工智能学习网站
https://chat.xutongbao.top








免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

傲渊山岳
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表