Create PowerPoint presentations with a powerful, concise JavaScript API.

Related tags

Data Visualization javascript powerpoint pptx powerpoint-presentations powerpoint-generation powerpoint-library javascript-powerpoint powerpoint-charts node-powerpoint angular-powerpoint html-to-powerpoint react-powerpoint typescript-powerpoint es6-powerpoint
Overview

PptxGenJS

Create JavaScript PowerPoint Presentations

PptxGenJS Sample Slides


Known Vulnerabilities npm downloads jsdelivr downloads typescripts definitions

Table of Contents

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 70 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.

Installation

CDN

jsDelivr Home

Bundle: Modern Browsers and IE11

<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/dist/pptxgen.bundle.js">script>
" aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay" data-copy-feedback="Copied!" data-tooltip-direction="w">

Min files: Modern Browsers

<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/libs/jszip.min.js">script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/dist/pptxgen.min.js">script>
" aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay" data-copy-feedback="Copied!" data-tooltip-direction="w">

Download

GitHub Latest Release

Bundle: Modern Browsers

  • Use the bundle for IE11 support
<script src="PptxGenJS/dist/pptxgen.bundle.js">script>
" aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay" data-copy-feedback="Copied!" data-tooltip-direction="w">

Min files: Modern Browsers

<script src="PptxGenJS/libs/jszip.min.js">script>
<script src="PptxGenJS/dist/pptxgen.min.js">script>
" aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay" data-copy-feedback="Copied!" data-tooltip-direction="w">

Npm

PptxGenJS NPM Home

npm install pptxgenjs --save

Yarn

yarn add pptxgenjs

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

import pptxgen from "pptxgenjs";

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

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

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

// 4. Save the Presentation
pres.writeFile();

Script/Web Browser

// 1. Create a new Presentation
let pres = new PptxGenJS();

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

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

// 4. Save the Presentation
pres.writeFile();

That's really all there is to it!

Library API

Full documentation and code examples are available

HTML-to-PowerPoint Feature

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

let pptx = new PptxGenJS();
pptx.tableToSlides("tableElementId");
pptx.writeFile({ fileName: "html2pptx-demo.pptx" });

Learn more:

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.

Contributors

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

Special Thanks:

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

Comments
  • Generated pptx won't open in PowerPoint 2007 due to rowspan

    Generated pptx won't open in PowerPoint 2007 due to rowspan

    I'm attempting to use this powerpoint generation, but I'm running into an issue using powerpoint reader 2007. The application cannot open the file. I can easily open this is Powerpoint 2016, but on my pc I'm having issues getting the powerpoint project to be able to even open the application. If You could assist me that would be marvelous!

    triage:question impact:legacy-versions 
    opened by CameronOC 17
  • [Feature request] Multiple text objects in one line without bullets or with align

    [Feature request] Multiple text objects in one line without bullets or with align

    The current system will not allow for multiple text objects without break if there is no bullet or some kind of align specified. This turns into a Problem if you consider, that text formatting (italic, bold, underlinde, strike, ...) are global to one text object. This means, that even code like this

    <html>
  <head>
    <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>
  </head>
  <body>
    <script>
        pptx = new PptxGenJS();
        var slide = pptx.addNewSlide();

        slide.addText([
            { text: 'abc', options: {}},
            { text: 'def', options: {italic:true}}
        ], {x:'0', y:'0', w:'100%', h:'100%', align:'center', valign:'middle'});

//          Save PPTX
        pptx.save('Titel');
    </script>
  </body>
</html>

    is not able to achieve this: abc_def_, but will output two seperate lines for abc and def. This could be easily mended by adding an additional attribute to the text objects, let’s say, break, and change line 3668 from

    else if ( idx > 0 && (typeof textObj.options.bullet !== 'undefined' || typeof textObj.options.align !== 'undefined') ) {
				strSlideXml += '</a:p><a:p>' + paragraphPropXml;
			}

    to

    else if ( idx > 0 && (typeof textObj.options.break === 'undefined' || textObj.options.break) && (typeof textObj.options.bullet !== 'undefined' || typeof textObj.options.align !== 'undefined') ) {
				strSlideXml += '</a:p><a:p>' + paragraphPropXml;
			}

    and using the code

    <html>
  <head>
    <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>
  </head>
  <body>
    <script>
        pptx = new PptxGenJS();
        var slide = pptx.addNewSlide();

        slide.addText([
            { text: 'abc', options: {}},
            { text: 'def', options: {italic:true, break:false}}
        ], {x:'0', y:'0', w:'100%', h:'100%', align:'center', valign:'middle'});

//          Save PPTX
        pptx.save('Titel');
    </script>
  </body>
</html>

    which will achieve the desired effect. See this patch: pptxgen.js.patch.txt

    feature:text enhancement-text 
    opened by vpetzel 16
  • Support for SVG images

    Support for SVG images

    Recent versions of office support embedding of SVG images in documents. Are there any plans to support SVG in addImage?

    I've done some initial investigation to see if there was an easy way to make this work, but it looks more complicated than I'd hoped.

    enhancement 
    opened by Krelborn 15
  • Feature Request: 'addTable()' should have an 'addHeaderToEach' option

    Feature Request: 'addTable()' should have an 'addHeaderToEach' option

    I did this slide.addTable(rows, addHeaderToEach: true); But it didn't work. I have checked the API documents, this API is not documented. Able to advise?

    enhancement-table 
    opened by okaiyong 15
  • Errors when using webpack/Typescript

    Errors when using webpack/Typescript

    I hit 2 errors in my project where we use webpack/Typescript. (Note: I'm using the library in a web page) The first error happened when building my project,

    ERROR in ./~/pptxgenjs/dist/pptxgen.js

Module not found: Error: Cannot resolve module 'fs' in c:\myproj\node_modules\pptxgenjs\dist
 @ ./~/pptxgenjs/dist/pptxgen.js 2536:10-23

ERROR in ./~/image-size/lib/index.js

Module not found: Error: Cannot resolve module 'fs' in c:\myproj\node_modules\image-size\lib
 @ ./~/image-size/lib/index.js 3:9-22

ERROR in ./~/image-size/lib/types/tiff.js

Module not found: Error: Cannot resolve module 'fs' in c:\myproj\node_modules\image-size\lib\types
 @ ./~/image-size/lib/types/tiff.js 6:9-22

    By referring to this post, I put the workaround in my webpack config node: { fs: "empty" }

    Then I hit another error when running my page in browser Uncaught (in promise) TypeError: callback is not a function at eval (eval at <anonymous> (main.js:8466), <anonymous>:193:104)

    It comes from this line of code in pptxgen.js zip.generateAsync({type:'nodebuffer'}).then(function(content){ fs.writeFile(strExportName, content, callback(strExportName)); });

    So, I comment it out as the following to bypass the error

    /*
if ( NODEJS ) {
	zip.generateAsync({type:'nodebuffer'}).then(function(content){ fs.writeFile(strExportName, content, callback(strExportName)); });
}
else { */
	zip.generateAsync({type:'blob'}).then(function(content){ writeFileToBrowser(strExportName, content, callback); });
// }

    Is there any way I can resolve the second error without changing PptxGenJS code?

    issue:bug 
    opened by Vivihung 15
  • breakLine not behaving correctly when

    breakLine not behaving correctly when "align" property set in .addText?

    I am parsing HTML strings with bold tags to make them appear in PowerPoint.

    For some reason, the breakLine property does not work when the 'align' property is set in a call to .addText. Line breaks are introduced after every element of the text snippet array. Removing the 'align' property makes it work again, but the text is moved to the left as a result. (Trial and error from my side)

    It is still a bit hard to find the issue myself, maybe it is somewhere around these lines in the screen shot.

    Mystery 😄

    Screenshot 2020-05-26 13 25 37 feature:text 
    opened by Slidemagic 14

  • "Module not found: Error: Can't resolve" error in Angular 6 made worse by 2.3.0

    So I updated PptxGenJS to 2.3.0, and actually ended up getting a much longer list of "Module not found: Error: Can't resolve" than I did with 2.2.0. No amount of messing with package.json files seemed to help.

    It's worth noting that it's no longer fs or path, but crypto, http, https, and a few others. The full log is below

    WARNING in ./node_modules/jsdom/lib/jsdom/utils.js
186:21-40 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/parse5/lib/index.js
55:23-49 Critical dependency: the request of a dependency is an expression

ERROR in ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js
Module not found: Error: Can't resolve 'child_process' in '/Users/abc123/Downloads/RRFE/node_modules/jsdom/lib/jsdom/living'
ERROR in ./node_modules/aws-sign2/index.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/aws-sign2'
ERROR in ./node_modules/aws4/aws4.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/aws4'
ERROR in ./node_modules/ecc-jsbn/index.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/ecc-jsbn'
ERROR in ./node_modules/http-signature/lib/verify.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/http-signature/lib'
ERROR in ./node_modules/http-signature/lib/signer.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/http-signature/lib'
ERROR in ./node_modules/oauth-sign/index.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/oauth-sign'
ERROR in ./node_modules/request/lib/helpers.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/request/lib'
ERROR in ./node_modules/request/lib/hawk.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/request/lib'
ERROR in ./node_modules/request/lib/oauth.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/request/lib'
ERROR in ./node_modules/sshpk/lib/utils.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/private-key.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/key.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/fingerprint.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/signature.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/certificate.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/identity.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/dhe.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib'
ERROR in ./node_modules/sshpk/lib/formats/openssh-cert.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib/formats'
ERROR in ./node_modules/sshpk/lib/formats/pem.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib/formats'
ERROR in ./node_modules/sshpk/lib/formats/ssh-private.js
Module not found: Error: Can't resolve 'crypto' in '/Users/abc123/Downloads/RRFE/node_modules/sshpk/lib/formats'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'http' in '/Users/abc123/Downloads/RRFE/node_modules/forever-agent'
ERROR in ./node_modules/http-signature/lib/signer.js
Module not found: Error: Can't resolve 'http' in '/Users/abc123/Downloads/RRFE/node_modules/http-signature/lib'
ERROR in ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js
Module not found: Error: Can't resolve 'http' in '/Users/abc123/Downloads/RRFE/node_modules/jsdom/lib/jsdom/living'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'http' in '/Users/abc123/Downloads/RRFE/node_modules/request'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'http' in '/Users/abc123/Downloads/RRFE/node_modules/tunnel-agent'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'https' in '/Users/abc123/Downloads/RRFE/node_modules/forever-agent'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'https' in '/Users/abc123/Downloads/RRFE/node_modules/request'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'https' in '/Users/abc123/Downloads/RRFE/node_modules/tunnel-agent'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in '/Users/abc123/Downloads/RRFE/node_modules/forever-agent'
ERROR in ./node_modules/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in '/Users/abc123/Downloads/RRFE/node_modules/tough-cookie/lib'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in '/Users/abc123/Downloads/RRFE/node_modules/tunnel-agent'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/abc123/Downloads/RRFE/node_modules/forever-agent'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/abc123/Downloads/RRFE/node_modules/tunnel-agent'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'zlib' in '/Users/abc123/Downloads/RRFE/node_modules/request'```
    env:angular 
    opened by antiremy 13
  • Rowspan, Colspan, and Multi-Row Headers Not Working

    Rowspan, Colspan, and Multi-Row Headers Not Working

    I have a two row header that I am expecting on my slides(see attached files with screen shots and HTML) and the second row does not show up. I removed my COLSPAN and ROWSPAN from the TD and TH (which did not work either). Any suggestions?

    first_header_of_two second_page_header_of_two

    var ext_heads = '' + '' + ';' + ';' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ' ' + ' ' + '' + 'IN' + 'OUT' + 'IN' + 'OUT' + 'IN' + 'OUT' + 'IN' + '' + '' + '' + '' + '' + '' + '';

    issue:bug feature:html-to-powerpoint 
    opened by skellman 13
  • How to hide data label having value 0

    How to hide data label having value 0

    Hii Brent, Thanks for this awesome library.

    I can generate presentations with graph. Below is an attached screenshot.

    image

    I want to hide the data values in the graph, those are displayed as 0%. Is it possible??? I use the following object as my chart options. { x: 0.25, y: 1, w: 9.5, h: 4.0, barDir: 'col', barGrouping: 'percentStacked', chartColors: ['808080', 'FFCC00', '986142', 'B3B3FF', 'FF8000'], barGapWidthPct: 150, showPercent: true, showValue: true, valGridLine: 'none', valAxisLabelFormatCode: '0%', dataLabelFormatCode: '0%' }

    help-wanted enhancement-chart 
    opened by belall-shaikh 13
  • Issue with adding Video files

    Issue with adding Video files

    Hi,

    I am trying to add a video file to the presentation, but there seems to be something wrong with the relations used for the video element, because after I export the ppt and try to open, PowerPoint is asking me to repair the ppt. After PowerPoint repairs the file, I can see that the relations for the video tag are changed in the slide file: (r:embed="rId1") <p14:media xmlns:p14="http://schemas.microsoft.com/office/powerpoint/2010/main" r:embed="rId1"/> and also in the _rels file, the tags are the same, the only change is the relationship ID that is re-assigned after PowerPoint file repair.

    When I generate the PPT, I take the video from the server and encode it in base64 and then I pass it to the data attribute of addMedia() function. I use js and not Node and for the encoding part I use XMLHttpRequest() and FileReader.readAsDataURL()

    The video is successfully encoded since I can add it as the source for the HTML video tag and it's still playing, and also in the generated PPT, in the media folder I can see the video and I can play it with any video player.

    Here are some parts of my code that will better define the flow that I use: Encoding the videos:

    jQuery('.elementVideo').each(function (ind, el) {
      var videoPath = jQuery(el).find('source').attr('src');
      var videoData = '';
      var request = new XMLHttpRequest();
      request.open('GET', videoPath, true);
      request.responseType = 'blob';
      request.onload = function () {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onloadend = function (e) {
          videoData = e.target.result;
          var elId = jQuery(el).attr('id');
         // add the encoded video string to mediaArray variable for later use
          mediaArray[elId] = videoData;
          if (mediaDone == jQuery('.elementVideo').length) {
            continueExport();
          } else {
            mediaDone++;
          }
        };
      };
      request.send();
    });

    And inside the continueExport() function I have the following for adding the video:

    var elId = jQuery(el).attr('id'); // the video HTML element
        var extraOptions = {
          rotate: getRotationDegrees(jQuery(el))
        };
        var options = {
          type: 'video',
          data: mediaArray[elId], // the encoded video
          x: pixel2inches(jQuery(el).position().left),
          y: pixel2inches(jQuery(el).position().top),
          w: pixel2inches(jQuery(el).width()),
          h: pixel2inches(jQuery(el).height()),
//          opts: extraOptions
        };
        slide.addMedia(options);

    Also attached there are the 2 files, the generated one and the one repaired by PowerPoint: Test Forms - Repaired.pptx Test Forms.pptx

    Any ideas would be helpful.

    Thanks, Adrian

    triage:question 
    opened by adrienco88 13
  • Can't create multiple presentations in node

    Can't create multiple presentations in node

    I am requiring pptx via var pptx = require('pptxgenjs') within a function called by a route on my node server, but when I hit the endpoint multiple times slides are added to the same presentation (first time it returns a ppt with 4 slides, second time one with 8 slides). Changing module.exports to be PptxGenJs in pptxgen.js and then requiring pptx = new (require('pptxgenjs'))() allowed me to get separate instances. Is this a bug or is there a way to get multiple instances in node without making that change?

    enhancement env:node.js 
    opened by daynedavis 13
  • Bump json5 from 1.0.1 to 1.0.2 in /demos/react-demo

    Bump json5 from 1.0.1 to 1.0.2 in /demos/react-demo

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • [BUG] Slide Master placeholders do not apply valign on PowerPoint > Add Slide

    [BUG] Slide Master placeholders do not apply valign on PowerPoint > Add Slide

    Description:

    When defining Master Slides and using a text placeholder with valign: "middle", if I add the slide using PowerPoint > New Slide dropdown > Any defined template the valign is top, no matter what was passed in placeholder.

    • [ ] Enhancement
    • [x] Bug
    • [ ] Question
    • [ ] Documentation gap/issue

    Product Versions

    • Please specify what version of the library you are using......: [3.11.0]
    • Please specify what version(s) of PowerPoint you are targeting: [PowerPoint for Microsoft 365]
    • Please specify what web browser you are using.................: [Chrome]

    Desired Behavior

    Using PowerPoint > Add Slide to add a master slide with a text placeholder that has valign: "middle" should produce a slide with a text area that is middle-aligned.

    The master slides demo contains an example of this issue. Run Demo and open the PowerPoint to observe the behavior

    From demos/modules/masters.mjs, the "MASTER_SLIDE" placeholder has valign: "middle"

    	// MASTER_SLIDE (MASTER_PLACEHOLDER)
	pptx.defineSlideMaster({
		title: "MASTER_SLIDE",
		background: { color: "E1E1E1", transparency: 50 },
		margin: [0.5, 0.25, 1.0, 0.25],
		slideNumber: { x: 0.6, y: 7.1, color: "FFFFFF", fontFace: "Arial", fontSize: 10, bold: true },
		objects: [
			//{ 'image': { x:11.45, y:5.95, w:1.67, h:0.75, data:STARLABS_LOGO_SM } },
			{
				rect: { x: 0.0, y: 6.9, w: "100%", h: 0.6, fill: { color: "003b75" } },
			},
			{
				text: {
					options: { x: 0, y: 6.9, w: "100%", h: 0.6, align: "center", valign: "middle", color: "FFFFFF", fontSize: 12 },
					text: "S.T.A.R. Laboratories - Confidential",
				},
			},
			{
				placeholder: {
					options: {
						name: "header",
						type: "title",
						x: 0.6,
						y: 0.2,
						w: 12,
						h: 1.0,
						margin: 0,
						align: "center",
						valign: "middle",
						color: "404040",
						//fontSize: 18,
					},
					text: "", // USAGE: Leave blank to have powerpoint substitute default placeholder text (ex: "Click to add title")
				},
			},
			{
				placeholder: {
					options: { name: "body", type: "body", x: 0.6, y: 1.5, w: 12, h: 5.25, fontSize: 28 },
					text: "(supports custom placeholder text!)",
				},
			},
		],
	});

    Observed Behavior

    Though the valign: "middle" does properly apply when using .addSlide({ masterName: "MASTER_SLIDE" }), it does NOT apply when adding a slide using this master template in PowerPoint.

    image

    image

    Steps to Reproduce

    1. PptxGenJS Feature Demos > Templates > Run Demo
    2. Open in PowerPoint
    3. Enable Editing
    4. Home > New Slide dropdown > MASTER_SLIDE
    5. Edit "(click to add title)" text area and see that it is top-aligned rather than middle-aligned.
    opened by missiontide 0
  • bug: doesn't handle image exif.orientation

    bug: doesn't handle image exif.orientation

    Hi, I am using #3.11.0, I add an image with exif.orientation=6. It should adjust the image to make it right, but it does. I have attached the pptx. Here is my git link react-demo.pptx

    Thanks for the great product.

    opened by pzhang25 0
  • [BUG] TableToSlides issue with text on Slides past the first slide generated

    [BUG] TableToSlides issue with text on Slides past the first slide generated

    Hello,

    I am seeking to do the following:

    pptx.tableToSlides('myHtmlTableID', { y: 1.5, masterSlideName: 'MASTER_SLIDE', addText: { text: 'Question One', options: { x: 0.5, y: 1, fontSize: 18 } }, });

    I am seeking to put a title at the top of each slide and then have the table rows follow. This works fine on the first slide generated, but it does not work for any additional slides that are generated.

    First Slide: image

    Subsequent slides: image

    Is there a simple fix for this? Would you expect this to work, or is this a bug?

    Thanks,

    -----Erik

    opened by ErikBleifield 0
  • Add appearOnClick property to images/shapes/media

    Add appearOnClick property to images/shapes/media

    Hi,

    Thanks a lot for this useful library. I was missing an option to show objects on click, so I hacked this together to suit my needs. I am aware that this is technically an animation and not part of the scope of this package, but maybe this work benefits someone else and/or provides someone inspiration to add full-fledged animation capabilities to this library.

    Again, thanks for this package.

    opened by MelleB 0
Releases(v3.11.0)
Owner
Brent Ely
SharePoint Application Architect | #SharePoint #SPFx #React #TypeScript #FluentUI #pnpspfx
Brent Ely
GitHub https://gitbrent.github.io/PptxGenJS/
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 6k Jan 3, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Create word clouds in JavaScript.

Word Cloud Layout This is a Wordle-inspired word cloud layout written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive

Jason Davies 3.6k Jan 2, 2023
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.

svgMap svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country. Live demo: h

Stephan Wagner 155 Dec 25, 2022
Different Widgets: Accordion, Search from Wikipedia(Wiki API), DropDown, Translate(Google API)

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Nikita Kavtsevich 1 Dec 19, 2021
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 937 Feb 5, 2021
Create graphics with a hand-drawn, sketchy, appearance

Rough.js Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw

Rough 17.8k Dec 30, 2022
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

Matteo Bruni 4.7k Jan 4, 2023
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 73 Dec 1, 2022