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>
<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脚本
$("#pptx").pptxToHtml({
pptxFileUrl: "Sample_12.pptx", //pptx文件地址，可以是url
slidesScale: "100%",
slideMode: false,
keyBoardShortCut: false
});4.如果是移动端项目需要把div缩放，否则生成的html元素过大会溢出屏幕（PC端可忽略此步骤）
再添加如下js脚本
// 由于生成的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
<template>
<div>
<iframe width="100%" style="height: 100vh;border:none;" :src="pptSrc"></iframe>
</div>
</template>6.拼接pptSrc
<script setup lang="ts">
const pptSrc= `/ppt/index.html?file=${encodeURIComponent(pptUrl)}`;
</script>至此，就可以在pc端和移动端查看ppt了