【JavaScript】Vue纯JS实现Office的pptx文件在线预览

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2023年5月26日 18:42 本文热度 2277

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

1.在PPTXjs官网下载最新版插件，或者下载下面版本插件，并在index.html内引入：

附件：PPTXjs-1.21.1.zip

<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.运行代码即可预览。

该文章在 2023/5/26 18:59:53 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。