npm 中文文档

PptxGenJS


  Create JavaScript PowerPoint Presentations

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. ``` shell
  2. npm install pptxgenjs --save
  3. ```

Yarn


  1. ``` shell
  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.12.0/dist/pptxgen.bundle.js"></script>
  3. ```

Min files: Modern Browsers

  1. ``` html
  2. <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.12.0/libs/jszip.min.js"></script>
  3. <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.12.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. ``` ts
  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. If you can't find your question, ask it yourself - be sure to tag it PptxGenJS.

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