网页预览PPT

Xia_Shang7

于 2024-09-09 11:32:28 发布

阅读量188

点赞数 2

文章标签： powerpoint

本文链接：https://blog.csdn.net/Xia_Shang7/article/details/142053409

版权

最近公司出了个预览ppt的需求，找了好多都是pdf预览，ppt预览的可太少了，TT

这里主要使用了jquery的pptxToHtml，因为是要当前界面显示结合了iframe 嵌套使用

1.在public文件夹新增ppt.html文件及相关css、js文件

<!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>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #warper {
            margin-right: auto;
            margin-left: auto;
            width: 900px;
        }
    </style>
</head>

<body>
    <div id="slide-resolte-contaniner"></div>
    <script>
        function getUrlParams(url) {
            console.log(123);

            // 通过 ? 分割获取后面的参数字符串
            let urlStr = url.split('?')[1]
            // 创建空对象存储参数
            let obj = {};
            // 再通过 & 将每一个参数单独分割出来
            let paramsArr = urlStr.split('&')
            for (let i = 0, len = paramsArr.length; i < len; i++) {
                // 再通过 = 将每一个参数分割为 key:value 的形式
                let arr = paramsArr[i].split('=')
                obj[arr[0]] = arr[1];
            }
            return obj
        }
        const params = getUrlParams(window.location.href)

        console.log(params["file"]);

        $("#slide-resolte-contaniner").pptxToHtml({
            pptxFileUrl: params["file"], //文件路径

            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>

2. 点击预览跳转至ppt.html

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { warelist } from '@/api/teacher'

onMounted(() => {
  init()
})

const fileDatas = ref([])
//初始化获取ppt列表接口
const init = async () => {
  const {data} = await warelist({subsection_id: 7, name: ""})
  fileDatas.value = data
}

const dataUrl = ref('')
const openFile = ref(false)
const openFileModal = (item: any) => {
  dataUrl.value = `${import.meta.env.VITE_APP_PATH}/online/exam/web/ppt.html?file=${import.meta.env.VITE_APP_PATH + item.content}`
  openFile.value = true
}
</script>

<template>
  <!-- 点击展示-->
  <div class="c-white" v-for="item in fileDatas">
    <div v-if="item.type === 5" class="ppt-item" @click="openFileModal(item)">{{ item.name }}</div>
  </div>

  <!-- 预览ppt展示框 -->
  <div class="ppt-show">
    <div style="width: 100%;height: 100%;padding-top: 20px;">
      <iframe
        :src="dataUrl"
        frameborder="0"
        id="myIframe"
        width="100%"
        height="100%"
        style="background-color: #fff;"
      ></iframe>
    </div>
  </div>
</template>
<style scoped lang='less'>
.ppt-item {
  display: inline-block;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid lightblue;
  cursor: pointer;
}

.ppt-show {
  margin-top: 20px;
  border: 1px solid pink;
  height: 1000px;
  width: 1500px;
}

</style>