Vue实现pptx在线预览

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

1.在PPTXjs官网下载插件，并在index.html内引入

<link rel="stylesheet" href="/PPTXjs/css/pptxjs.css">
<link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css"> <!-- 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 -->

2.html代码

<div id="pptx"></div>

3.js代码

$("#pptx").pptxToHtml({ pptxFileUrl: "Sample_12.pptx", //pptx文件地址slidesScale: "100%", slideMode: false, keyBoardShortCut: false 
});

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

// 由于生成的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.运行代码即可预览

---------------------
作者：张鲁一
来源：CSDN
原文：https://blog.csdn.net/qq_43075191/article/details/125640149
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件