Skip to content

meshesha/PPTXjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

93 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PPTXjs

MIT License

jQuery plugin for convertation pptx to html using pure javascript.

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

About

jquery plugin for convertation pptx to html

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages