Welcome folks today in this blog post we will be using the PPTX.js library to view powerpoint documents in browser and convert it to html. All the full source code of the application is shown below.
Get Started
In order to get started you need to go to download the github repository by going to the below url as shown below
https://github.com/meshesha/PPTXjs
Basically this library supports color and text presentations. You can even embed audio and Youtube Videos as well
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>PPTXjs - Meshesha</title> <link rel="stylesheet" href="./css/pptxjs.css"> <link rel="stylesheet" href="./css/nv.d3.min.css"> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="./js/jszip.min.js"></script> <script type="text/javascript" src="./js/filereader.js"></script> <script type="text/javascript" src="./js/d3.min.js"></script> <script type="text/javascript" src="./js/nv.d3.min.js"></script> <script type="text/javascript" src="./js/pptxjs.js"></script> <script type="text/javascript" src="./js/divs2slides.js"></script> <script type="text/javascript" src="./js/jquery.fullscreen-min.js"></script> <script type="text/javascript"> $(function() { var oldWidth, oldMargin ,isFullscreenMode=false; $("#fullscreen-btn").on("click", function(){ if(!isFullscreenMode){ oldWidth = $("#result .slide").css("width"); oldMargin = $("#result .slide").css("margin"); $("#result .slide").css({ "width": "99%", "margin": "0 auto" }) $("#result").toggleFullScreen(); isFullscreenMode = true; }else{ $("#result .slide").css({ "width": oldWidth, "margin": oldMargin }) $("#result").toggleFullScreen(); isFullscreenMode = false; } }); $(document).bind("fullscreenchange", function() { if(!$(document).fullScreen()){ $("#result .slide").css({ "width": oldWidth, "margin": oldMargin }) } }); }); </script> <style> html, body { margin: 0; padding: 0; } #warper { margin-right: auto; margin-left: auto; width: 900px; } </style> </head> <body> <div id="warper"> <input id="uploadFileInput" type="file" /> <br><br> <div id="container"> <input id="fullscreen-btn" type="button" value="Fullscreen" /> <br> <div id="result"></div> </div> </div> <script> $("#result").pptxToHtml({ pptxFileUrl: "Sample_12.pptx", fileInputId: "uploadFileInput", slideMode: false, keyBoardShortCut: false, slideModeConfig: { //on slide mode (slideMode: true) first: 1, nav: false, /** true,false : show or not nav buttons*/ navTxtColor: "white", /** color */ navNextTxt:"›", //">" navPrevTxt: "‹", //"<" showPlayPauseBtn: false,/** true,false */ keyBoardShortCut: false, /** true,false */ showSlideNum: false, /** true,false */ showTotalSlideNum: false, /** true,false */ autoSlide: false, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */ randomAutoSlide: false, /** true,false ,autoSlide:true */ loop: false, /** true,false */ background: "black", /** false or color*/ transition: "default", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */ transitionTime: 1 /** transition time in seconds */ } }); </script> </body> </html> |
