Skip to content

Latest commit

 

History

History
175 lines (167 loc) · 5.89 KB

README.md

File metadata and controls

175 lines (167 loc) · 5.89 KB
Raw

PPTXjs

MIT License

jQuery plugin for convertation pptx to html using pure javascript.

Demo: https://pptx.js.org/pages/demos.html

environment

browsers:

  • IE11
  • Edge
  • FireFox
  • chrome

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 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.
      • 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 ...

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/dingbat.js"></script> <!--for bullets -->
<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 */
  jsZipV2: "./js/jszip.min.js", /*flase or 'path/to/jsZip.V2.js' */
  themeProcess: true, /*true (default) , false, "colorsAndImageOnly"*/
  incSlide:{height: 2,width:2 }, /*increase height or/and width by 2 px*/
  slideType: "divs2slidesjs", /*'divs2slidesjs' (default) , 'revealjs'(https://revealjs.com)
  slideModeConfig: {  //divs2slidesjs - 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 */           
  },
   		revealjsConfig: { /* for 'revealjs' settings (https://revealjs.com) */
   			transition: 'zoom',
   			// backgroundTransition: 'zoom', 
   			// autoSlide: 5000,
   			// loop: true
   			slideNumber: true
   		}
});
</script>

Changelog

  • v1.21.1

    • fixed issues:

  • v1.21.00

    • add theme (background) support
    • improved tables
    • improved bullets (add ./js/dingbat.js)
    • fixed issues:
    • more documentation coming soon ...

  • v1.11.0

    • Support for embedding video from a link (tested youtube and vimeo links)
    • support 'revealjs'(https://revealjs.com) (It is not recommended to add a theme because it distorts some of the elements like tables )
    • I think i fix issue officetohtml/issues/7 (not tested)
    • Change loading view
    • Fix center slides in fullscreen mode - (https://github.com/meshesha/divs2slides v1.3.3)
    • Support emf and wmf files - microsoft files, supported only in Internet Explorer (test in IE11)

  • V.1.10.4

    • fixed security issue : #3

  • V.1.10.3

    • new divs2slides (v.1.3.2)
    • fixed div width issue

  • V.1.10.2

    • new divs2slides v.1.3.1
    • fixed some issues

  • V.1.10.0

    • added the ability to load jsZip v.2 in case jsZip v.3 is loaded for another use.
    • (note: using this method will reload the page)
    • and fixed some errors issue.

  • V.1.9.3

    • support Equations and formulas as Image
    • Added an ability to scale Slides in percent
    • and fixed background color issue.

License

  • Copyright © 2017 Meshesha
  • MIT