Convert PPTX File To HTML - jQuery PPTX.js

PPTX.js is a jQuery-based PPTX to HTML converter that converts a Microsoft PowerPoint file to HTML for further usage.

Inspired by PPTX2HTML.js library but supports almost all HTML elements like shapes, videos, blocks, etc.

Once a converted deck needs browser-based transitions, navigation, and full-screen presentation controls, try this jQuery HTML presentation plugin.

How to use it:

1. Load the PPTX.js plugin and other resources in the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- jszip.js 2.x https://github.com/Stuk/jszip/tree/v2.x -->
<script src="/path/to/cdn/jszip.min.js"></script>
<!-- filereader.js http://github.com/bgrins/filereader.js -->
<script src="./js/filereader.js"></script>
<!-- d3.js 3.x + nvd3 Required for Chart conversion -->
<script src="/path/to/cdn/d3.min.js"></script>
<link rel="stylesheet" href="/path/to/cdn/nv.d3.min.css" />
<script src="/path/to/cdn/nv.d3.min.js"></script>
<!-- divs2slides.js Required for slideshow mode -->
<script src="./js/divs2slides.js"></script>
<!-- pptxjs plugin files -->
<link rel="stylesheet" href="./css/pptxjs.css" />
<script src="./js/pptxjs.js"></script>

2. Create a container to hold the HTML generated from the PPTX file you specify.

<div id="example"></div>

3. Call the function on the container you just created and determine the path to the PPTX file.

$("#example").pptxToHtml({
  pptxFileUrl: "/path/to/demo.pptx"
});

4. You can also specify an input to convert PPTX files from the local.

<input id="pptx-file" type="file" />

$("#example").pptxToHtml({
  fileInputId: "pptx-file"
});

5. Determine the slide scale (from 0 to 100%).

$("#example").pptxToHtml({
  slidesScale: "50%"
});

6. Determine whether or not to process video and audio files. Default: true.

$("#example").pptxToHtml({
  mediaProcess: true
});

7. Enable and config the slideshow mode.

$("#example").pptxToHtml({

  // default: false
  slideMode: true,

  // enter/exit the slideshow mode with F5
  keyBoardShortCut: false,

  // slideshow configs
  slideModeConfig: { 
    first: 1, // first slide
    nav: false, // enable nav links
    navTxtColor: "white", 
    showPlayPauseBtn: false,
    keyBoardShortCut: false, 
    showSlideNum: false,
    showTotalSlideNum: false,
    autoSlide: false,
    randomAutoSlide: false,
    loop: false, 
    background: "black", 
    transition: "default", // "slid","fade","default","random" 
    transitionTime: 1          
  }
  
});

Alternatives & Related Resources:

• Beautiful HTML Presentation Library - reveal.js

Changelog:

v1.21.1 (2022-03-27)

• add theme (background) support

v1.21.0 (2021-11-15)

• add theme (background) support
• improved tables
• improved bullets (add ./js/dingbat.js)
• fixed issues

---

This awesome jQuery plugin is developed by meshesha. For more Advanced Usages, please check the demo page or visit the official website.