PptxGenJS

Create PowerPoint presentations with a powerful, concise JavaScript API.

Presentation
gitbrent/PptxGenJSgitbrent.github.io/PptxGenJS/pptxgenjs

README

PptxGenJS

  Create JavaScript PowerPoint Presentations

PptxGenJS Sample Slides


Known Vulnerabilities npm downloads jsdelivr downloads typescripts definitions

Table of Contents


- Table of Contents
- Introduction
- Features
- Works Everywhere
- Full Featured
- Simple and Powerful
- Export Your Way
- HTML to PowerPoint
- Live Demos
- Installation
- Npm
- Yarn
- CDN
- Download
- Additional Builds
- Documentation
- Quick Start Guide
  - Angular/React, ES6, TypeScript
  - Script/Web Browser
- Library API
- HTML-to-PowerPoint Feature
- Library Ports
- Issues / Suggestions
- Need Help?
- Contributors
- Sponsor Us
- License

Introduction


This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Features


Works Everywhere


- Every modern desktop and mobile browser is supported
- Integrates with Node, Angular, React, and Electron
- Compatible with PowerPoint, Keynote, and more

Full Featured


- All major object types are available (charts, shapes, tables, etc.)
- Master Slides for academic/corporate branding
- SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts

Simple and Powerful


- The absolute easiest PowerPoint library to use
- Learn as you code will full typescript definitions included
- Tons of demo code comes included (over 75 slides of features)

Export Your Way


- Exports files direct to client browsers with proper MIME-type
- Other export formats available: base64, blob, stream, etc.
- Presentation compression options and more

HTML to PowerPoint


- Includes powerful HTML-to-PowerPoint feature to transform HTML tables into presentations with a single line of code

Live Demos


Visit the demos page to create a simple presentation to see how easy it is to use pptxgenjs, or check out the complete demo which showcases every available feature.

- PptxGenJS Demos

Installation


Npm


PptxGenJS NPM Home

  1. ``` sh
  2. npm install pptxgenjs --save
  3. ```

Yarn


  1. ``` sh
  2. yarn add pptxgenjs
  3. ```

CDN


jsDelivr Home

Bundle: Modern Browsers and IE11

  1. ``` html
  2. <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.11.0/dist/pptxgen.bundle.js"></script>
  3. ```

Min files: Modern Browsers

  1. ``` html
  2. <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.11.0/libs/jszip.min.js"></script>
  3. <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.11.0/dist/pptxgen.min.js"></script>
  4. ```

Download


GitHub Latest Release

Bundle: Modern Browsers

- Use the bundle for IE11 support

  1. ``` html
  2. <script src="PptxGenJS/dist/pptxgen.bundle.js"></script>
  3. ```

Min files: Modern Browsers

  1. ``` html
  2. <script src="PptxGenJS/libs/jszip.min.js"></script>
  3. <script src="PptxGenJS/dist/pptxgen.min.js"></script>
  4. ```

Additional Builds


- CommonJS: dist/pptxgen.cjs.js
- ES Module: dist/pptxgen.es.js


Documentation


Quick Start Guide


PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:

Angular/React, ES6, TypeScript


  1. ```typescript
  2. import pptxgen from "pptxgenjs";

  4. // 1. Create a new Presentation
  5. let pres = new pptxgen();

  7. // 2. Add a Slide
  8. let slide = pres.addSlide();

  10. // 3. Add one or more objects (Tables, Shapes, Images, Text and Media) to the Slide
  11. let textboxText = "Hello World from PptxGenJS!";
  12. let textboxOpts = { x: 1, y: 1, color: "363636" };
  13. slide.addText(textboxText, textboxOpts);

  15. // 4. Save the Presentation
  16. pres.writeFile();
  17. ```

Script/Web Browser


  1. ``` js
  2. // 1. Create a new Presentation
  3. let pres = new PptxGenJS();

  5. // 2. Add a Slide
  6. let slide = pres.addSlide();

  8. // 3. Add one or more objects (Tables, Shapes, Images, Text and Media) to the Slide
  9. let textboxText = "Hello World from PptxGenJS!";
  10. let textboxOpts = { x: 1, y: 1, color: "363636" };
  11. slide.addText(textboxText, textboxOpts);

  13. // 4. Save the Presentation
  14. pres.writeFile();
  15. ```

That's really all there is to it!


Library API


Full documentation and code examples are available

- Creating a Presentation
- Presentation Options
- Adding a Slide
- Slide Options
- Saving a Presentation
- Master Slides
- Adding Charts
- Adding Images
- Adding Media
- Adding Shapes
- Adding Tables
- Adding Text
- Speaker Notes
- Using Scheme Colors
- Integration with Other Libraries


HTML-to-PowerPoint Feature


Easily convert HTML tables to PowerPoint presentations in a single call.

  1. ``` js
  2. let pptx = new PptxGenJS();
  3. pptx.tableToSlides("tableElementId");
  4. pptx.writeFile({ fileName: "html2pptx-demo.pptx" });
  5. ```

Learn more:

- HTML-to-PowerPoint Docs/Demo


Library Ports


React: react-pptx - thanks to Joonas!


Issues / Suggestions


Please file issues or suggestions on the issues page on github, or even better, submit a pull request. Feedback is always welcome!

When reporting issues, please include a code snippet or a link demonstrating the problem.
Here is a small jsFiddle that is already configured and uses the latest PptxGenJS code.


Need Help?


Sometimes implementing a new library can be a difficult task and the slightest mistake will keep something from working. We've all been there!

If you are having issues getting a presentation to generate, check out the code in the demos directory. There
are demos for both client browsers, node and react that contain working examples of every available library feature.

- Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle
- [View questions tagged PptxGenJS on StackOverflow](https://stackoverflow.com/questions/tagged/pptxgenjs?sort=votes&pageSize=50). If you can't find your question, ask it yourself - be sure to tag itPptxGenJS.


Contributors


Thank you to everyone for the issues, contributions and suggestions! ❤️

Special Thanks:

- Dzmitry Dulko - Getting the project published on NPM
- Michal Kacerovský - New Master Slide Layouts and Chart expertise
- Connor Bowman - Adding Placeholders
- Reima Frgos - Multiple chart and general functionality patches
- Matt King - Chart expertise
- Mike Wilcox - Chart expertise
- Joonas - React port

PowerPoint shape definitions and some XML code via Officegen Project


Sponsor Us


If you find this library useful, please consider sponsoring us through a donation


License


Copyright © 2015-present Brent Ely

MIT