browsers:

  • IE > 10
  • Edge
  • FireFox
  • chrome

Support:

  • Text
    • Font size
    • Font family
    • Font style: blod, italic, underline, stok
    • 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 of 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.
    • 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
  • Custom table
  • Theme table
  • Theme
    • Background color
    • Background image
  • Equations and formulas
    • display Equations and formulas as image
  • and more ...

usage:

include necessary css files:


          <link rel="stylesheet" href="./css/pptxjs.css">
          <link rel="stylesheet" href="./css/nv.d3.min.css"> <!-- for charts graphs -->

include necessary js files:


          <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
          <script type="text/javascript" src="./js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
          <script type="text/javascript" src="./js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
          <script type="text/javascript" src="./js/d3.min.js"></script> <!-- for charts graphs -->
          <script type="text/javascript" src="./js/nv.d3.min.js"></script> <!-- for charts graphs -->
          <script type="text/javascript" src="./js/pptxjs.js"></script>
          <script type="text/javascript" src="./js/divs2slides.js"></script> <!-- for slide show -->

html body :


         ...
          <div id="your_div_id_result"></div>
          optional:
          <input id="upload_pptx_fiile" type="file" />
        ...

add javascript:


          <script type="text/javascript">
            $("#your_div_id_result").pptxToHtml({
              pptxFileUrl: "path/to/yore_pptx_file.pptx", 
              fileInputId: "upload_pptx_fiile",
              slidesScale: "", //Change Slides scale by percent
              slideMode: false,
              keyBoardShortCut: false,
              mediaProcess: true, /** true,false: if true then process video and audio files */
              slideModeConfig: {  //on slide mode (slideMode: true)
                first: 1,
                nav: false, /** true,false : show or not nav buttons*/
                navTxtColor: "white", /** color */
                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>

Setting options:

# name description default value
1 slidesScale Change Slides scale by percent(%). for orginal size set this option to "" or "100%" ""
2 slideMode If true, turn on presentation mode. The settings of the presentation mode are controlled by the variables "slideModeConfig" false
3 keyBoardShortCut If true, enable to enter or exit from presentation mode by keyboard shortcut F5 false
4 mediaProcess if true, then process video and audio files.If 'false', you can not play and see or hear the videos and audios embedded in the presentation. true
5 jsZipV2 url link to jsZip version 2.
This allows the ability to load jsZip v.2 in case jsZip v.3 is loaded for another use.		 false
6 slideModeConfig settings of the presentation mode.
for more details click here		 {}
7 slideModeConfig.first The first slide that will be loaded. 1
8 slideModeConfig.nav show ('true') or hide ('false') navigator buttons. true
9 slideModeConfig.navTxtColor color of slide number text and total slides number shown in navigator area. "black"
10 slideModeConfig.keyBoardShortCut if true , enable to control presentation by keyboard shortcuts.
for keyboard shortcuts list click here 		false
11 slideModeConfig.showSlideNum if true , show slide number in navigator area. true
12 slideModeConfig.showTotalSlideNum if true , show total slides number in navigator area. true
13 slideModeConfig.autoSlide options:'false' or number (seconds). if set 'false' it disable auto slide mode. if set number then auto slide mode will be enabled and the number will be the time between slides. 1
14 slideModeConfig.randomAutoSlide if true and autoSlide mode are enabled then The slides appear in random order. false
15 slideModeConfig.loop if true, in presentation mode , after last slide will go to first slide. in auto slideMode, the presentation will play in loop. false
16 slideModeConfig.background color of presentation background. false
17 slideModeConfig.transition transition types options: "slid","fade","default","random". "default"
18 slideModeConfig.transitionTime Time delay in seconds between slides. 1