How to: add PPT export to your JavaScript application

#javascript #react #angular #ppt

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 and you can find a sample code HERE. Download and Play!

Let's get started!!

Installing PptxGenJS

npm install pptxgenjs --save

Creating a presentation

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

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.

// 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. setLayout() method can be used to set the layout of the PPT.

pptx.setLayout('LAYOUT_WIDE');

Custom layouts can be defined using defineLayout() method.

// 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

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

// 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

// 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

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 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!