How to implement pptx online preview

Vue implements pptx online preview

PPTX online preview, using jquery plugin "PPTXjs》, pure front-end implementation of pptx to html for display

1. Download the plug-in on the official website of PPTXjs

Introduced

<link rel="stylesheet" href="/PPTXjs/css/" rel="external nofollow" >
<link rel="stylesheet" href="/PPTXjs/css/nv." rel="external nofollow" > <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/jquery-1.11."></script>
<script type="text/javascript" src="/PPTXjs/js/"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="/PPTXjs/js/"></script> <!--/meshesha/ -->
<script type="text/javascript" src="/PPTXjs/js/"></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/nv."></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/"></script>
<script type="text/javascript" src="/PPTXjs/js/"></script> <!-- for slide show -->

Code

<div ></div>

Code

$("#pptx").pptxToHtml({ 
    pptxFileUrl: "Sample_12.pptx", //pptx file address    slidesScale: "100%", 
    slideMode: false, 
    keyBoardShortCut: false 
});

4. If it is a mobile project

Need to zoom the div

Otherwise, the generated html element will overflow the screen if it is too large (this step can be ignored on the PC side)

// Since the generated html element will overflow if it is too large, use a timer to detect the element to be generated and displayed after the generation is completed.let timer = setInterval(() =&gt; {
    const $slides = $(".slides");
    if ($().length) {
      const slidesWidth = (...($()).map((s) =&gt; ))
      const $wrapper = $('#pptx');
      const wrapperWidth = $wrapper[0].offsetWidth;
      $({
        transform: `scale(${wrapperWidth / slidesWidth})`,
        "transform-origin": "top left",
      })
      clearInterval(timer)
    }
}, 100);

Run the code to preview

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.