Integration to the Angular 4 #220

darsana · 2017-10-25T13:45:55Z

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 · 2017-10-26T03:16:47Z

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 · 2017-10-26T04:26:03Z

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 · 2017-10-26T04:53:28Z

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

Does anything discussed in Issue 72 help?

mayurjhanwar · 2017-11-06T18:58:48Z

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

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

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

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 · 2017-11-07T03:26:03Z

Thanks for the follow-up @mayurjhanwar !

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

Issue #220

vasanthBR · 2018-02-16T07:40:33Z

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

jobnte · 2018-02-21T18:45:19Z

@vasanthBR same here, do you find any solution?

gitbrent · 2018-10-23T02:12:37Z

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

Latest Issues:

Issue "Module not found: Error: Can't resolve" error in Angular 6 made worse by 2.3.0 #407
Issue Added better NodeJS checking and better support for Angular #415

dev-amitkmishra · 2018-12-07T05:52:47Z

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 · 2018-12-20T11:29:42Z

------------------------------------------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 · 2018-12-20T17:59:26Z

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.

Go to project root in terminal/powershell/whatever:
```
npm install pptxgenjs
```
Make sure NODE types are recognized by adding the following to [root]/src/tsconfig.app.json

  "types": [
    "node"
  ]

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')

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');
}

gitbrent added the triage:question label Oct 26, 2017

gitbrent self-assigned this Oct 26, 2017

gitbrent added the env:node.js label Nov 5, 2017

gitbrent added the env:angular label Nov 7, 2017

gitbrent closed this as completed Nov 7, 2017

gitbrent pushed a commit that referenced this issue Nov 7, 2017

Added Angular info

48cae0b

Issue #220

gitbrent pushed a commit that referenced this issue Nov 14, 2017

Added new setAngular option (Issue #220)

a3025d2

ericrockey pushed a commit to WeTransfer/PptxGenJS that referenced this issue Mar 24, 2020

Added new setAngular option (Issue gitbrent#220)

533c611

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integration to the Angular 4 #220

Integration to the Angular 4 #220

darsana commented Oct 25, 2017

gitbrent commented Oct 26, 2017

darsana commented Oct 26, 2017

gitbrent commented Oct 26, 2017

mayurjhanwar commented Nov 6, 2017 •

edited by gitbrent

Loading

gitbrent commented Nov 7, 2017

vasanthBR commented Feb 16, 2018

jobnte commented Feb 21, 2018

gitbrent commented Oct 23, 2018

dev-amitkmishra commented Dec 7, 2018 •

edited by gitbrent

Loading

mtiwari55 commented Dec 20, 2018 •

edited

Loading

dgabriel commented Dec 20, 2018 •

edited

Loading

Integration to the Angular 4 #220

Integration to the Angular 4 #220

Comments

darsana commented Oct 25, 2017

gitbrent commented Oct 26, 2017

darsana commented Oct 26, 2017

gitbrent commented Oct 26, 2017

mayurjhanwar commented Nov 6, 2017 • edited by gitbrent Loading

gitbrent commented Nov 7, 2017

vasanthBR commented Feb 16, 2018

jobnte commented Feb 21, 2018

gitbrent commented Oct 23, 2018

dev-amitkmishra commented Dec 7, 2018 • edited by gitbrent Loading

mtiwari55 commented Dec 20, 2018 • edited Loading

dgabriel commented Dec 20, 2018 • edited Loading

mayurjhanwar commented Nov 6, 2017 •

edited by gitbrent

Loading

dev-amitkmishra commented Dec 7, 2018 •

edited by gitbrent

Loading

mtiwari55 commented Dec 20, 2018 •

edited

Loading

dgabriel commented Dec 20, 2018 •

edited

Loading