Pptxgenjs: Using PptxGenJs in React

Created on 14 Mar 2018 · 6Comments · Source: gitbrent/PptxGenJS

Hi ,

How to import the pptxgenjs in the react app . i have installed it via npm . But not sure how to import it in the file .

I am getting the PptxGenJS() as undefined . i am using the version 2.0.0 .

Thanks .

angular documentation

Source

shyam2794

Most helpful comment

This works in angular:

const PptxGenJS = require('pptxgenjs');
const pptx = new PptxGenJS();

pptx.setBrowser(true);

export function generatePPT() {
    const slide = pptx.addNewSlide();
    const opts = { x: 1.0, y: 1.0, font_size: 42, color: '00FF00' };
    slide.addText('Hello World!', opts);
    pptx.save();
}

sriganeshharitz on 4 Apr 2018

👍3 🚀1 🎉1

All 6 comments

Hi @gitbrent , Any update on this ?

shyam2794 on 27 Mar 2018

There's a couple Issues open for Angular/React at the moment, but i'm unable to produce a test case as i dont use either.

I use this in Node.js:
var pptx = require("pptxgenjs");

gitbrent on 28 Mar 2018

This works in angular:

const PptxGenJS = require('pptxgenjs');
const pptx = new PptxGenJS();

pptx.setBrowser(true);

export function generatePPT() {
    const slide = pptx.addNewSlide();
    const opts = { x: 1.0, y: 1.0, font_size: 42, color: '00FF00' };
    slide.addText('Hello World!', opts);
    pptx.save();
}

sriganeshharitz on 4 Apr 2018

👍3 🚀1 🎉1

@sriganeshharitz Thanks man!

This also works in Vue!

TinkerJack-zz on 8 Jun 2018

I have tested it in React and it works as expected. I followed a similar approach to @sriganeshharitz by simply creating a generatePPI() method in the component and using an onClick handler which calls the method. If you have any trouble let me know and I can show my code.

Edit: As per the documentation it's also very important to include "pptx.setBrowser(true)" or you may run into some problems