PptxGenJS

Reproduces an HTML table into 1 or more slides (auto-paging).

• Supported cell styling includes background colors, borders, fonts, padding, etc.
• Slide margin settings can be set using options, or by providing a Master Slide definition

Notes:

• CSS styles are only supported down to the cell level (word-level formatting is not supported)
• Nested tables are not supported in PowerPoint, therefore they cannot be reproduced (only the text will be included)

HTML to PowerPoint Syntax

slide.tableToSlides(htmlElementID);
slide.tableToSlides(htmlElementID, { OPTIONS });

HTML to PowerPoint Options (ITableToSlidesOpts)

Option	Type	Default	Description	Possible Values
x	number	1.0	horizontal location (inches)	0-256. Table will be placed here on each Slide
y	number	1.0	vertical location (inches)	0-256. Table will be placed here on each Slide
w	number	100%	width (inches)	0-256.
h	number	100%	height (inches)	0-256.
addHeaderToEach	boolean	false	add table headers to each slide	Ex: {addHeaderToEach: true}
addImage	string		add an image to each slide	Ex: {addImage: {image: {path: "images/logo.png"}, options: {x: 1, y: 1, w: 1, h: 1}}}
addShape	string		add a shape to each slide	Use the established syntax
addTable	string		add a table to each slide	Use the established syntax
addText	string		add text to each slide	Use the established syntax
autoPage	boolean	true	create new slides when content overflows	Ex: {autoPage: false}
autoPageCharWeight	number	0.0	character weight used to determine when lines wrap	-1.0 to 1.0. Ex: {autoPageCharWeight: 0.5}
autoPageLineWeight	number	0.0	line weight used to determine when tables wrap	-1.0 to 1.0. Ex: {autoPageLineWeight: 0.5}
colW	number		table column widths	Array of column widths. Ex: {colW: [2.0, 3.0, 1.0]}
masterSlideName	string		master slide to use	Slide Masters name. Ex: {master: 'TITLE_SLIDE'}
newSlideStartY	number		starting location on Slide after initial	0-(slide height). Ex: {newSlideStartY:0.5}
slideMargin	number	1.0	margins to use on Slide	Use a number for same TRBL, or use array. Ex: {margin: [1.0,0.5,1.0,0.5]}

HTML to PowerPoint Table Options

Add an data attribute to the table’s <th> tag to manually size columns (inches)

• minimum column width can be specified by using the data-pptx-min-width attribute
• fixed column width can be specified by using the data-pptx-width attribute

Example:

<table id="tabAutoPaging" class="tabCool">
  <thead>
    <tr>
      <th data-pptx-min-width="0.6" style="width: 5%">Row</th>
      <th data-pptx-min-width="0.8" style="width:10%">Last Name</th>
      <th data-pptx-min-width="0.8" style="width:10%">First Name</th>
      <th data-pptx-width="8.5"     style="width:75%">Description</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

HTML to PowerPoint Notes

• Your Master Slides should already have defined margins, so a Master Slide name is the only option you’ll need most of the time
• Hidden tables wont auto-size their columns correctly (as the properties are not accurate)

HTML to PowerPoint Examples

// Pass table element ID to tableToSlides function to produce 1-N slides
pptx.tableToSlides("myHtmlTableID");

// Optionally, include a Master Slide name for pre-defined margins, background, logo, etc.
pptx.tableToSlides("myHtmlTableID", { master: "MASTER_SLIDE" });

// Optionally, add images/shapes/text/tables to each Slide
pptx.tableToSlides("myHtmlTableID", {
  addText: { text: "Dynamic Title", options: { x: 1, y: 0.5, color: "0088CC" } },
});
pptx.tableToSlides("myHtmlTableID", {
  addImage: { path: "images/logo.png", x: 10, y: 0.5, w: 1.2, h: 0.75 },
});

HTML Table

Resulting Slides

Demos

• Working example is available under /demos

HTML to PowerPoint Creative Solutions

Design a Master Slide that already contains: slide layout, margins, logos, etc., then you can produce professional looking Presentations with a single line of code which can be embedded into a link or a button:

Add a button to a webpage that will create a Presentation using whatever table data is present:

<button onclick="{ var pptx=new PptxGenJS(); pptx.tableToSlides('tableId'); pptx.writeFile(); }" type="button">Export to PPTX</button>

SharePoint Integration

Placing a button like this into a WebPart is a great way to add “Export to PowerPoint” functionality to SharePoint. (You’d also need to add the PptxGenJS bundle <script> in that/another WebPart)

This site is open source. Improve this page.