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.