For AI agents: the complete documentation index is available at /pptxgenjs-plus/llms.txt, the full documentation bundle is available at /pptxgenjs-plus/llms-full.txt, and this page is available as Markdown at /pptxgenjs-plus/html-to-powerpoint.md.
pptxgenjs

    HTML to PowerPoint

    The tableToSlides method reproduces an HTML table across one 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)

    OptionTypeDefaultDescriptionPossible Values
    xnumber1.0horizontal location (inches)0-256. Table will be placed here on each Slide
    ynumber1.0vertical location (inches)0-256. Table will be placed here on each Slide
    wnumber100%width (inches)0-256.
    hnumber100%height (inches)0-256.
    addHeaderToEachbooleanfalseadd table headers to each slideEx: {addHeaderToEach: true}
    addImagestringadd an image to each slideEx: {addImage: {image: {path: "images/logo.png"}, options: {x: 1, y: 1, w: 1, h: 1}}}
    addShapestringadd a shape to each slideUse the established syntax
    addTablestringadd a table to each slideUse the established syntax
    addTextstringadd text to each slideUse the established syntax
    autoPagebooleantruecreate new slides when content overflowsEx: {autoPage: false}
    autoPageCharWeightnumber0.0character weight used to determine when lines wrap-1.0 to 1.0. Ex: {autoPageCharWeight: 0.5}
    autoPageLineWeightnumber0.0line weight used to determine when tables wrap-1.0 to 1.0. Ex: {autoPageLineWeight: 0.5}
    colWnumbertable column widthsArray of column widths. Ex: {colW: [2.0, 3.0, 1.0]}
    masterSlideNamestringmaster slide to useSlide Masters name. Ex: {master: 'TITLE_SLIDE'}
    newSlideStartYnumberstarting location on Slide after initial0-(slide height). Ex: {newSlideStartY:0.5}
    slideMarginnumber1.0margins to use on SlideUse a number for same TRBL, or use array. Ex: {margin: [1.0,0.5,1.0,0.5]}

    HTML to PowerPoint Table Options

    Add a 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

    • Master Slides should already define margins, so a Master Slide name is typically the only option required
    • Hidden tables will not auto-size their columns correctly (the required 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

    HTML-to-PowerPoint Table

    Resulting Slides

    HTML-to-PowerPoint Presentation

    HTML to PowerPoint Integration Patterns

    Design a Master Slide that already contains the slide layout, margins, and logos. A complete presentation can then be produced with a single line of code, embedded in a link or a button.

    Add a button to a webpage that creates a presentation from the table data currently 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 practical way to add "Export to PowerPoint" functionality to SharePoint. The pptxgenjs bundle <script> must also be added to that or another WebPart.