pptxgenjs-angular

JavaScript library that creates PowerPoint presentations

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
pptxgenjs-angular
2,4332101.0.0-beta6 years ago6 years agoMinified + gzip package size for pptxgenjs-angular in KB

Popular Searches

Readme

Open Source Love MIT Licence npm version npm downloads
PptxGenJS (Angular-cli compatible fork)

JavaScript library that produces PowerPoint (pptx) presentations

Quickly and easily create PowerPoint presentations with a few simple JavaScript commands in client web browsers or Node desktop apps.

Main Features

  • Widely Supported: Creates and downloads presentations on all current web browsers (Chrome, Edge, Firefox, etc.) and IE11
  • Full Featured: Slides can include Charts, Images, Media, Shapes, Tables and Text (plus Master Slides/Templates)
  • Easy To Use: Entire PowerPoint presentations can be created in a few lines of code
  • Modern: Pure JavaScript solution - everything necessary to create PowerPoint PPT exports is included

Additional Features

  • Use the unique HTML-to-PowerPoint feature to copy an HTML table into 1 or more Slides with a single command


Table of Contents (generated with DocToc)
- Client-Side
- [Include Local Scripts](#include-local-scripts)
- [Include Bundled Script](#include-bundled-script)
- [Install With Bower](#install-with-bower)
- Node.js - Presentation Creation/Options - Slide Creation/Options - Saving a Presentation - Master Slides and Corporate Branding - Adding Charts - Adding Images - Adding Media (Audio/Video/YouTube) - Adding Shapes - Adding Tables - Adding Text - Including Speaker Notes - Using Scheme Colors

Live Demo
Use JavaScript to create a PowerPoint presentation with your web browser right now:
https://gitbrent.github.io/PptxGenJS
Installation

Client-side Angular-cli

Install this FORK with npm

Download and copy pptxgenjs-angular-1.0.0-beta.tgz to your project directory.
Then run: 
npm install ./pptxgenjs-angular-1.0.0-beta.tgz

Update your project's angular.json file:
"scripts": [
  "node_modules/pptxgenjs-angular/libs/jquery.min.js",
  "node_modules/pptxgenjs-angular/libs/jszip.min.js",
  "node_modules/pptxgenjs-angular/libs/promise.min.js",
]
Start the app:
ng serve
Now you can import PptxGenJS in your components like so:
import * as PptxGenJS  from 'pptxgenjs-angular'

Client-Side NON-ANGULAR, DO NOT USE THIS FORK

Include Local Scripts

<script lang="javascript" src="PptxGenJS/libs/jquery.min.js"></script>
<script lang="javascript" src="PptxGenJS/libs/jszip.min.js"></script>
<script lang="javascript" src="PptxGenJS/dist/pptxgen.js"></script>
  • IE11 support requires a Promises polyfill as well (included in the libs folder)

Include Bundled Script

<script lang="javascript" src="PptxGenJS/dist/pptxgen.bundle.js"></script>
  • Bundle script includes all libraries: jQuery + JSzip + PptxGenJS + Promises

Install With Bower

bower install pptxgen

Node.js

PptxGenJS NPM Homepage 
npm install pptxgenjs

var pptx = require("pptxgenjs");
  • Desktop: Compatible with Electron applications

Quick Start Guide
PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:
  1. Create a new Presentation
  2. Add a Slide
  3. Add one or more objects (Tables, Shapes, Images, Text and Media) to the Slide
  4. Save the Presentation

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();
slide.addText('Hello World!', { x:1.5, y:1.5, fontSize:18, color:'363636' });
pptx.save('Sample Presentation');
That's really all there is to it!
Library API

Presentation Creation/Options

Creating a Presentation
Presentation Options

Slide Creation/Options

Adding a Slide
Slide Options

Saving a Presentation

Saving a Presentation

Master Slides and Corporate Branding

Master Slides

Adding Charts

Adding Charts

Adding Images

Adding Images

Adding Media (Audio/Video/YouTube)

Adding Media

Adding Shapes

Adding Shapes

Adding Tables

Adding Tables

Adding Text

Adding Text

Including Speaker Notes

Speaker Notes

Using Scheme Colors

Using Scheme Colors
HTML-to-PowerPoint Feature
HTML-to-PowerPoint
Integration with Other Libraries
Integration with Other Libraries
Full PowerPoint Shape Library
If you are planning on creating Shapes (basically anything other than Text, Tables or Rectangles), then you'll want to include the pptxgen.shapes.js library.
The shapes file contains a complete PowerPoint Shape object array thanks to the officegen project.
<script lang="javascript" src="PptxGenJS/dist/pptxgen.shapes.js"></script>

Typescript Definitions
As of version 2.3.0, typescript definitions are available (pptxgen.d.ts).
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 demos in the examples directory. There are demos for both Nodejs and client-browsers that contain working examples of every available library feature.

Unimplemented Features
The PptxGenJS library is not designed to replicate all the functionality of PowerPoint, meaning several features are not on the development roadmap.
These include:
  • Animations
  • Importing Existing Presentations and/or Templates
  • Outlines
  • SmartArt

Special Thanks

Support Us
Do you like this library and find it useful? Tell the world about us! PptxGenJS project
Thanks to everyone who supports this project! ❤
License
Copyright © 2015-2018 Brent Ely
MIT