Pptxgenjs: Integration to the Angular 4

[darsana]

Tried the Ppt generation into the angular 4 project by installing through node js like below

npm install pptxgenjs
var pptx = require("pptxgenjs");

but call to the ppt generation function not giving any response
generatePPT() {
var pptx = new pptx();
var slide = pptx.addNewSlide();
var opts = { x: 1.0, y: 1.0, font_size: 42, color: '00FF00' };
slide.addText('Hello World!', opts);
pptx.save();
}

[gitbrent]

Hi @darsana ,

If Angular is like Node, then you dont need the var pptx = new pptx(); line, maybe that's the issue?

First, try just this:
console.log( pptx.getVersion() )

Then see if removing the new line works:

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

[darsana]

Thank you for the response. I tried as you mentioned

The version of the pptx is 1.9.0.20171010 And my Node version is 3.10.10

Now I am getting the error like below

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: fs.writeFile is not a function
TypeError: fs.writeFile is not a function
at pptxgen.js:1624
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142)
at zone.js:844
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at pptxgen.js:1624
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142)
at zone.js:844
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at resolvePromise (zone.js:795)
at zone.js:847
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at

[gitbrent]

Ah, Angular is being detected as Node and is trying use the Node fs (filesystem) call.

Does anything discussed in Issue 72 help?

[mayurjhanwar]

I did below 2 changes in library and able to use the library with Angular4

1. Changed the pptxgen.js from passing singelton object to construtor. Around end of file (line no. 4756)

//module.exports = new PptxGenJS();
module.exports = PptxGenJS;

1. Change the code near line 1624

else /*if ( NODEJS ) {
    if ( gObjPptx.saveCallback ) {
        if ( strExportName.indexOf('http') == 0 ) {
            zip.generateAsync({type:'nodebuffer'}).then(function(content){ gObjPptx.saveCallback(content); });
        }
        else {
            zip.generateAsync({type:'nodebuffer'}).then(function(content){ fs.writeFile(strExportName, content, gObjPptx.saveCallback(strExportName)); });
        }
    }
    else {
        zip.generateAsync({type:'nodebuffer'}).then(function(content){ fs.writeFile(strExportName, content); });
    }
}
else {*/
    zip.generateAsync({type:'blob'}).then(function(content){ writeFileToBrowser(strExportName, content); });
//}
})

After doing these 2 fixed I am able to integrate with my Angular 4.

[gitbrent]

Thanks for the follow-up @mayurjhanwar !

Issue #83 will change the export to a factory/constructor (target 2.0).

[vasanthBR]

Hi Brent,
I Install PptxGenJS using npm. i cannot able to implement into my project using angular 5. Please proceed the steps ?

[jobnte]

@vasanthBR same here, do you find any solution?

[gitbrent]

Update: Oct-2018:
Fixes for this issue will be delivered in the upcoming release: Version 2.4.0

Latest Issues:

• Issue #407
• Issue #415

[dev-amitkmishra]

Use PPtxGenJs in angular2+ like this:

import * as pptGen from 'pptxgenjs';

const pptx = new pptGen();
const slide = pptx.addNewSlide();
slide.addImage({ data: 'image/png;base64, ' + b64Data + '', x: 1, y: 2, w: 3, h: 3 })
slide.addImage({ path: '/assets/mean.jpg', x: 1, y: 2, w: 3, h: 3 })
slide.addText('Image Path!', { x: 1.5, y: 1.5, font_size: 18, color: '363636' });
pptx.save('Sample Presentation');

[mtiwari55]

------------------------------------------Add Index.html file--------------------------------------

Move to component and added

--------------------------------- App.component.ts ---------------------------------------------------------

import { Component } from '@angular/core';

declare var PptxGenJS: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'pptProject';

constructor() {
var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();
var opts = { x: 1.0, y: 1.0, fontSize: 42, color: '00FF00' };
slide.addText('Hello World!', opts);
pptx.save();
}
}

Note : Js file do not know the function name so we have to declare function name in component example i have use in my compionent
declare var PptxGenJS: any;

[dgabriel]

I have this working in several Angular applications. Here are the steps to use it in an Angular 6+ app:

The primary assumption is that you have an existing Angular project generated with Angular-CLI (the only sane way to work with Angular!), and you want to be able to generate and download slide decks for your client.

1. Go to project root in terminal/powershell/whatever:
   npm install pptxgenjs

2. Make sure NODE types are recognized by adding the following to [root]/src/tsconfig.app.json

   "types": [
     "node"
   ]
   

3. Add the following to [root]/tsconfig.json to make the bundled jszip component work properly in the browser:

   "paths": {
     "jszip": [
       "node_modules/jszip/dist/jszip.min.js"
     ]
   }
   

( otherwise you'll get this error: Module not found: Error: Can't resolve 'stream' in '/path/to/project/node_modules/jszip/lib')

1. Try the sample code in any component where you want the PPTX generation functionalty:

   dlPPT() {
   const PptxGenJS = require('pptxgenjs');
   
   const pptx = new PptxGenJS();
   const slide = pptx.addNewSlide();
   slide.addText('Hello World!', { x: 1.5, y: 1.5, fontSize: 18, color: '363636' });
   pptx.save('Sample Presentation');
   }