jQuery Plugin for Convert PPTX to HTML5 | PPTXjs

convert-pptx-to-html5

PPTXjs is a jQuery plugin for pptx-to-html conversational/convertation using pure JavaScript.

Support:


  • Text
    • Font size
    • Font family
    • Font style: bold, italic, underline, stoke
    • Color
    • hyperlink
    • bullets (include numeric)
  • Text block (convert to Div)
    • Align (Horizontal and Vertical)
    • Background color (single color)
    • Border (borderColor, borderWidth, borderType, strokeDasharray)
  • Shapes (support most shapes)
    • Background color (single color, gradient colors)
    • Background image
    • Rotations
    • Align
    • Border
  • Custom shape
  • Media
    • Picture (jpg/jpeg,png,gif,svg)
    • Video (html5 video player: mp4,ogg,WebM)
      • IE:MP4.
      • Chrome: MP4, WebM, Ogg.
      • Firefox: MP4, WebM, Ogg.
      • YouTube (v1.11.0)
      • Vimeo (v1.11.0)
    • Audio (html5 audio player:mp3,ogg,Wav)
      • IE:mp3.
      • Chrome:mp3,Wav,Ogg.
      • Firefox:mp3,Wav,Ogg
  • Graph
    • Bar chart
    • Line chart
    • Pie chart
    • Scatter chart
  • SmartArt diagrams
  • Tables
    • Custom table
    • Theme table
  • Theme
  • Equations and formulas
    • display Equations and formulas as image
  • and more …

Must Read: A Lightweight Web Component Assistant for HTML5 Videos | Video Radio Star

How to make use of it:

1. Load the PPTX.js plugin 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 containing the HTML generated from the PPTX file.

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

3. Call the function in the container you just created and specify the path to the PPTX file.

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

4. You can also select an input to convert PPTX files locally.

<input id="pptx-file" type="file" />
$("#example").pptxToHtml({
  fileInputId: "pptx-file"
});

5. Select the sliding scale (from 0 to 100%).

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

6. Decide whether you want to process video and audio files or not.

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

7. Enable and configure the slide show 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          
  }
  
});

See Demo And Download

Official Website(meshesha): Click Here

This superior jQuery/javascript plugin is developed by meshesha. For extra Advanced Usages, please go to the official website.