vue项目PC端和移动端实现在线预览pptx文件

通过PPTXjs插件,实现PPTX文件在线预览,需下载PPTXjs,将其引入HTML页面,并编写相应的HTML和JS代码,如果是移动端还需调整div大小,这是一种便捷的前端PPTX转HTML技术,适合网页展示使用

PPTX在线预览,使用jquery的插件《PPTXjs》,纯前端实现pptx转html进行展示

点击下载PPTXjs

1.把下载的包放到public中ppt目录

2.在ppt目录新建index.html,添加内容

html 复制代码
<html>
<header>
<link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" rel="external nofollow" >
<link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" rel="external nofollow" > <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/PPTXjs/js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="/PPTXjs/js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="/PPTXjs/js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/pptxjs.js"></script>
<script type="text/javascript" src="/PPTXjs/js/divs2slides.js"></script> <!-- for slide show -->
</header>
<body>
<div id="pptx"></div>
</body>
<script>

</script>
</html>

3.在script中添加js脚本

javascript 复制代码
$("#pptx").pptxToHtml({ 
    pptxFileUrl: "Sample_12.pptx", //pptx文件地址,可以是url
    slidesScale: "100%", 
    slideMode: false, 
    keyBoardShortCut: false 
});

4.如果是移动端项目需要把div缩放,否则生成的html元素过大会溢出屏幕(PC端可忽略此步骤)

再添加如下js脚本

javascript 复制代码
// 由于生成的html元素过大会溢出,这里用定时器检测元素生成完毕后进行缩放显示
let timer = setInterval(() => {
    const $slides = $(".slides");
    if ($slides.children().length) {
      const slidesWidth = Math.max(...Array.from($slides.children()).map((s) => s.offsetWidth))
      const $wrapper = $('#pptx');
      const wrapperWidth = $wrapper[0].offsetWidth;
      $wrapper.css({
        transform: `scale(${wrapperWidth / slidesWidth})`,
        "transform-origin": "top left",
      })
      clearInterval(timer)
    }
}, 100);

5.在vue文件中使用iframe来渲染html

html 复制代码
<template>
  <div>
    <iframe width="100%" style="height: 100vh;border:none;" :src="pptSrc"></iframe>
  </div>
</template>

6.拼接pptSrc

TypeScript 复制代码
<script setup lang="ts">
    const pptSrc= `/ppt/index.html?file=${encodeURIComponent(pptUrl)}`;
</script>

至此,就可以在pc端和移动端查看ppt了

相关推荐
花生侠8 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
猿榜10 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
阿幸软件杂货间14 分钟前
阿幸课堂随机点名
android·开发语言·javascript
一涯15 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调22 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab23 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined224 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端