How to: add PPT export to your JavaScript application
Tags: javascript, react, angular, ppt
Published: 2020-08-19 18:47:39

Today I am going to share something very interesting which caught my attention when my client asked me to add an interactive PPT export in our React application which can be fully customized even after download.

We have already seen image, excel and pdf export in many applications and these are very common nowadays. But at times users want to use the content of our applications in their presentations especially when charts and graphs involved, then it could be a pain for the user to gather all the required data and construct those charts and graphs in their Powerpoint presentation on their own.

So, is there an easy way to implement this. Luckily yes!

There is an awesome javascript library called PptxGenJS which provides powerful tools to create Powerpoint presentations using your JavaScript code.

I am going to explain the steps below but if you want to see a working example please check out this live [DEMO](https://akashseth31.github.io/react-ppt-export/) and you can find a sample code [HERE](https://github.com/akashseth31/react-ppt-export). Download and Play!

Let's get started!!

### Installing PptxGenJS
```javascript
npm install pptxgenjs --save
```

### Creating a presentation
```javascript
import pptxgen from "pptxgenjs";
const pptx = new pptxgen();
```

### Adding Master Slide
A master slide can be used to enforce/follow a certain design or corporate branding. Slides added using the Master Slide name inherits the design of the master slide automatically.

Using defineSlideMaster() method along with options object(to style the slide) Master Slides can be created. e.g.:

```javascript
const copyright = `© 2019 My copyright`;

pptx.defineSlideMaster({
    title: 'MASTER_SLIDE',
    bkgd: 'FFFFFF',
    objects: [
        { image: { x: 10.7, y: scales.yTop, w: 2.3, h: 0.3, path: 'path/to/image/' } },
        { text: { text: copyright, options: { x: scales.xLeft, y: 6.9, w: 10, h: 0.75, fontSize: scales.fontSmall, color: 'A9A9A9' } } },
        { image: { x: 11, y: 7, w: 2, h: 0.23, path: 'path/to/image/' } },
    ],
});
```

### Adding a Slide to PPT
Slides can be added to the presentation using addSlide() method.

```javascript
// without MASTER_SLIDE - this will add a blank slide
const slide = pptx.addSlide();

// with MASTER_SLIDE - this will inherit master slides design
const slide = pptx.addSlide('MASTER_SLIDE');
```

### Slide Layout
The Library provides a few standard layout options. You can find them [here](https://gitbrent.github.io/PptxGenJS/docs/usage-pres-options.html#standard-slide-layouts). setLayout() method can be used to set the layout of the PPT.
```javascript
pptx.setLayout('LAYOUT_WIDE');
```

Custom layouts can be defined using defineLayout() method.
```javascript
// Define new layout for the Presentation
pptx.defineLayout({ name:'MY_CUSTOM_LAYOUT', width:16.5, height:11.7 });

// Set presentation to use new layout
pptx.setLayout('MY_CUSTOM_LAYOUT');
```
### Saving the presentation
```javascript
const PptxGenJS = require('pptxgenjs');
const filename = 'PPT_NAME.pptx';
const pptx = new PptxGenJS();
pptx.setLayout('LAYOUT_WIDE');
/*
Add slides here.
Please note that all slides should be added using the above-defined pptx instance only. 
*/
// Save PPT
pptx.writeFile("test.pptx");
```

### Adding Text
```javascript
// EX: Basic formatting
slide.addText('Hello',  { x:0.5, y:0.7, w:3, color:'0000FF', fontSize:64 });
slide.addText('World!', { x:2.7, y:1.0, w:5, color:'DDDD00', fontSize:90 });

// EX: More formatting options
slide.addText(
    'Arial, 32pt, green, bold, underline, 0 inset',
    { x:0.5, y:5.0, w:'90%', margin:0.5, fontFace:'Arial', fontSize:32, color:'00CC00', bold:true, underline:true, isTextBox:true }
);

// EX: Format some text
slide.addText('Hello World!', { x:2, y:4, fontFace:'Arial', fontSize:42, color:'00CC00', bold:true, italic:true, underline:true } );

// EX: Multiline Text / Line Breaks - use "\n" to create line breaks inside text strings
slide.addText('Line 1\nLine 2\nLine 3', { x:2, y:3, color:'DDDD00', fontSize:90 });

// EX: Format individual words or lines by passing an array of text objects with `text` and `options`
slide.addText(
    [
        { text:'word-level', options:{ fontSize:36, color:'99ABCC', align:'right', breakLine:true } },
        { text:'formatting', options:{ fontSize:48, color:'FFFF00', align:'center' } }
    ],
    { x:0.5, y:4.1, w:8.5, h:2.0, fill:'F1F1F1' }
);

// EX: Bullets
slide.addText('Regular, black circle bullet', { x:8.0, y:1.4, w:'30%', h:0.5, bullet:true });
// Use line-break character to bullet multiple lines
slide.addText('Line 1\nLine 2\nLine 3', { x:8.0, y:2.4, w:'30%', h:1, fill:'F2F2F2', bullet:{type:'number'} });
```

### Adding Images
```javascript
// EX: Image by local URL
slide.addImage({ path:'path_to_image/image.png', x:1, y:1, w:8.0, h:4.0 });

// EX: Image from remote URL
slide.addImage({ path:'https://image_url/image.jpg', x:1, y:1, w:6, h:4 })

// EX: Image by data (pre-encoded base64)
slide.addImage({ data:'image/png;base64,iVtDafDrBF[...]=', x:3.0, y:5.0, w:6.0, h:3.0 });

// EX: Image with Hyperlink
slide.addImage({
  x:1.0, y:1.0, w:8.0, h:4.0,
  hyperlink:{ url:'https://github.com/gitbrent/pptxgenjs', tooltip:'Visit Homepage' },
  path:'images/chart_world_peace_near.png',
});
```

### Chart Legend Position
Chart legend position can be changed by passing **legendPos** option.
b (bottom), tr (top-right), l (left), r (right), t (top)
Default: **r**

### Adding a Horizontal Bar Chart to slide

```javascript
const slide = pptx.addNewSlide('MASTER_SLIDE');
const chartColors = ['2F77CF', 'F8F8F8']; // You can pass colorScales from monae here. Note that the colors doesn't has '#' in it.
const chartOptions = {
    x: 2,
    y: 1.5,
    w: 13,
    h: 5,
    barGrouping: 'clustered',
    barDir: 'bar',
    chartColors,
    showLabel: true,
    showPercent: true,
    valAxisHidden: true,
    valGridLine: 'none',
    showValue: true,
    dataLabelFormatCode: '0%',
    dataLabelPosition: 'outEnd',
};
slide.addChart(pptx.charts.BAR, data, chartOptions);
```
This library supports almost all types of charts. Do check the [documentaion](https://gitbrent.github.io/PptxGenJS/docs/api-charts.html) for more details.

## Conclusion
The benefit of PptxGenJS is that this library provides the power of customizations and the exported PPT can be very different from what you are showing on your application. You can add/remove details as per your convenience or users' requirements.

See you next time!