Adding ppt Export in your Javascript App

Libraries that support presentations.

When it comes to presentation , there are some frameworks to create HTML based presentations which won’t let you create Power Point presentations . You may run your logic to play with html and css to get presentation like controls on the web page itself .
You may use reveal.js , deck.core to create HTML based presentations.

Not many options are available If you wish to generate power point presentations (basically export .pptx files) with javascript . However there is a very powerful javascript library that creates power point presentations.

Its my personal favourite , namely , “PPtxGenJS”.
You may find some more libraries like “officegen” that does similar tasks.

About PPtxGenJS

· Widely Supported: Creates and downloads presentations on all current web browsers (Chrome, Edge, Firefox, etc.) and IE11

· Full Featured: Slides can include Charts, Images, Media, Shapes, Tables and Text (plus Master Slides/Templates)

· Easy To Use: Entire PowerPoint presentations can be created in a few lines of code

· Modern: Pure JavaScript solution — everything necessary to create PowerPoint PPT exports is included.

For installation and documentation follow this link , https://gitbrent.github.io/PptxGenJS/

Note : I will be using the version pptxgen#2.1.0 .

Note : some of the versions have breaking changes and may not be backward compatible.

How simple is it to create your first presentation ??

Just these 4 lines of code and PPTxgenJS will save a powerpoint presentation file for you . Its really that simple.

Please go through the documentation and try it out yourself !!
This post can be more clear to you once you have some practice with pptxgenJS.

Key takeaways

In the demo and documentation of PPTXgenJs , you may find a lot about how to use this library for your purpose. I would like to share few tips that might help you :

• To generate ppts without hassle and errors.
• To design Layouts.
• Making the ppt adaptive / responsive to your dynamic data / text.
• Adding images while maintaining their aspect ratio.
• Avoid Exceptions that may break the exported ppt file and show unusual behaviour.

Designing Layout.

• keep reference points and define co-ordinates of all items w.r.t them

Positioning is very difficult with this library since there is no interactive tool to input co-ordinates of any slide element. You may have to re-download the slides again and gain for perfection. However to make things easier and maintainable keep some point as the reference point and define the position co-ordinates of other elements in terms of that reference point. If you follow such practices , you will find it easy to add items in a list over the slide through a loop and in case you want everything to be moved to a new position , you just need to move the reference point.

For instance ,
ref point is origin (0,0) and all other quadrants are defined w.r.t ref point.

slide template

• Divide items into reusable components and define functions for each of them .

You may define functions which draw distinct components for the slide and can be called each time you want to draw the component. You can control the positioning and design of the component by making the function parametric.

For instance :

A function to add header on each slide .

• One above the other (like a stack)

You can add multiple elements at a particular (x,y). Elements will be stacked to the z axis of the slide in the order in which you add them in the code.
For instance:
If you want to draw the following shape :

diamond with each side drawn in different color

You won’t be able to draw such a shape directly . You may add an image by creating a png or jpeg and add it . The other way to it is , first draw coloured triangles and place white triangles on top of them .

coloured and white triangles separately

• Make rows responsive / adaptive .

Sometimes you may deal with random dynamic data and you might not know how many slides will be required to represent that data.

Lets say you have to add 5 statements one below the other. A statement can be any characters long. It may or may not fit in a single row. You may use your logic and some mathematics of ratio and proportion to make the rows of text responsive.
For instance : if you know 1 line with 100 characters take 4 units length and height ‘h’ , then a text with 120 characters should be given the height equivalent to the height of 2 lines because it won’t fit in a single line and the next statement should start after that line ends.

Note: Some lodash utility methods are used in code snippet.

Sample code :

• Add new slide if data doesn’t fits.

You can basically keep track of the ‘y’ axis and set some threshold value.
Whenever any component is trying to spread beyond this threshold.
Add a slide and place the component in the next slide.

This is how you do it :

• Adding images while maintaining their aspect ratio.

You should know the ratio ( height : width) of the original image and based on this ratio you can fit that image in a box of definite size.
A use case can be , if you are creating a resume generator app that exports a slide with the input data and image of the user .You use a template where the image should fit in a box of 5 X 3 . The user can upload images with different aspect ratios but you might need to align and display the image maintaining its aspect ratio.

To know the aspect ratio of the image using javascript.

To fit the image in a predefined box.

You should know :

(OriginalImageWidth / originalImageHeight) = (newImageWidth / newImageHeight)

Know some exceptions and ways to handle them .

• Adding the text ‘0’ (zero)

If you try to add the text whose data type is number and whose value is ‘0' to a slide , you won’t see anything. zero is considered as a falsy value and won’t appear even if you add it.
The way to add it would be by casting it into string format.
For instance :

• Error message “repair after download”

You may see sometimes that the downloaded ppt is giving a warning message that it needs to be repaired upon opening. Its really hard to debug such errors because you won’t encounter any console errors. What happens basically is , the config object of the apis expect a specific data type for each field.
For instance :

• If you supply a Nan or Infinity for ‘w’ , ’h’ , ’x’ , ’y’ . The ppt may get corrupted.

• If you supply ‘#’ along with color code like ‘#ff00’

These guidelines are compiled on my experience of development. I am grateful to my colleague , Manav Kodnani for working on this library with me.I would love to know your views on the pointers mentioned above.
Feel free to ask any doubt if you are facing some problem using this library.
Please leave a comment, and let me know!

If you liked this post, please share, comment and give few 👏 😊

Adding Bar Chart and Line Chart Objects in ppt exports — Javascript