Convert PPTX File To HTML - jQuery PPTX.js

File Size: 20.6 MB
Views Total: 5716
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Convert PPTX File To HTML - jQuery PPTX.js

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

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

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          
  }
  
});

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.