DOCSEARCHbyAlgolia
Submit Docs

PPTXjs

repository·master·Indexed 42 days ago

https://github.com/meshesha/pptxjs

A jQuery plugin that converts PowerPoint (.pptx) files into HTML using pure JavaScript. It supports text, shapes, media, charts, tables, and SmartArt, with integration options for divs2slidesjs and revealjs slide modes.

Tokens
1.3K
Snippets
4
Records
5
Agent score
5%

What's inside PPTXjs

  1. Install and set up PPTXjs

    master

    PPTXjs is a jQuery plugin used to convert PPTX files to HTML. To use it, you must include several CSS and JavaScript dependencies in your project.

    Important Note on JSZip: This plugin requires JSZip version 2. If your project already uses JSZip version 3, you must use the jsZipV2 option in the configuration to point to a version 2 instance (this may cause a page reload).

    <!-- CSS Dependencies -->
<link rel="stylesheet" href="./css/pptxjs.css">
<link rel="stylesheet" href="./css/nv.d3.min.css">

<!-- JS Dependencies -->
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jszip.min.js"></script> <!-- Must be v2 -->
<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/dingbat.js"></script>
<script type="text/javascript" src="./js/pptxjs.js"></script>
<script type="text/javascript" src="./js/divs2slides.js"></script>

  2. Convert PPTX to HTML using pptxToHtml()

    master

    To convert a PowerPoint file, call the .pptxToHtml() method on a target container element. You can either provide a direct URL to a .pptx file via pptxFileUrl or allow users to upload a file using an input element via fileInputId.

    // Target a div for the output
// Optional: <input id="upload_pptx_file" type="file" />

$("#your_div_id_result").pptxToHtml({
   pptxFileUrl: "path/to/your_pptx_file.pptx", 
   fileInputId: "upload_pptx_file",
   // ... other options
});

  3. Configure divs2slidesjs slide mode

    master

    When slideMode is set to true and slideType is 'divs2slidesjs', use the slideModeConfig object to customize the presentation experience.

    slideModeConfig: {
  first: 1,
  nav: false, /** show or not nav buttons */
  navTxtColor: "white",
  showPlayPauseBtn: false,
  keyBoardShortCut: false,
  showSlideNum: false,
  showTotalSlideNum: false,
  autoSlide: false, /** false or seconds (the pause time between slides). Use F8 to activate if keyBoardShortCut is true */
  randomAutoSlide: false,
  loop: false,
  background: "black", /** false or color */
  transition: "default", /** "slid", "fade", "default", "random" */
  transitionTime: 1 /** transition time in seconds */
}

  4. Configure revealjs slide mode

    master

    If you set slideType to 'revealjs', you can customize the presentation using the revealjsConfig object. Note: Using a theme with revealjs is not recommended as it may distort elements like tables.

    revealjsConfig: {
  transition: 'zoom',
  // backgroundTransition: 'zoom',
  // autoSlide: 5000,
  // loop: true,
  slideNumber: true
}

  5. Configure pptxToHtml options

    master

    The pptxToHtml method accepts a configuration object to control rendering behavior, media processing, and slide modes.

    Core Options

    • pptxFileUrl: (string) Path to the .pptx file.
    • fileInputId: (string) ID of the file input element for uploads.
    • slidesScale: (string) Change slides scale by percent.
    • slideMode: (boolean) Enable/disable slide mode.
    • keyBoardShortCut: (boolean) Enable/disable keyboard shortcuts.
    • mediaProcess: (boolean) If true, processes video and audio files.
    • jsZipV2: (string) Path to jszip.min.js version 2 (required if version 3 is already in use).
    • themeProcess: (boolean | string) Set to true (default), false, or "colorsAndImageOnly" to control theme processing.
    • incSlide: (object) Increase height or width by pixels, e.g., {height: 2, width: 2}.
    • slideType: (string) The rendering engine. Options: 'divs2slidesjs' (default) or 'revealjs'.