Convert an HTML table to editable PowerPoint slides with PptxGenJS

That narrower scope is useful for a workshop equipment allocation table. The presentation needs each equipment name and quantity in an editable cell, rather than one screenshot of the entire page.

Start with a visible table

In a browser project where a pinned PptxGenJS browser bundle and its documented dependencies are already loaded, use a small original fixture:

<table id="equipment-table">
  <thead>
    <tr><th>Equipment</th><th>Quantity</th><th>Collection point</th></tr>
  </thead>
  <tbody>
    <tr><td>Recorders</td><td>6</td><td>Desk A</td></tr>
    <tr><td>Headphones</td><td>12</td><td>Desk B</td></tr>
  </tbody>
</table>
<button type="button" id="export-equipment">Export table</button>
<p id="export-status" role="status"></p>

Keep the table visible and allow fonts and styles to finish loading before export. The project's HTML-to-PowerPoint documentation warns that hidden tables do not supply reliable measurements for automatic column sizing. Fixing a hidden table by forcing a tiny font can make the resulting deck hard to read.

Export through the presentation instance

With that markup present and the browser bundle exposing pptxgen, attach the export action:

const button = document.querySelector('#export-equipment');
const status = document.querySelector('#export-status');

button.addEventListener('click', async () => {
  button.disabled = true;
  status.textContent = 'Preparing the equipment table…';
  try {
    const deck = new pptxgen();
    deck.layout = 'LAYOUT_WIDE';
    deck.tableToSlides('equipment-table', {
      x: 0.5,
      y: 0.7,
      w: 12,
      autoPageRepeatHeader: true
    });
    await deck.writeFile({ fileName: 'equipment-allocation.pptx' });
    status.textContent = 'Export finished. Open the PowerPoint file to check it.';
  } catch (error) {
    status.textContent = 'Export failed. Check the browser console.';
    console.error(error);
  } finally {
    button.disabled = false;
  }
});

The current project README identifies tableToSlides as a presentation method. Its type definitions document the options and the promise returned by writeFile. Use the API that matches your installed release; older examples may show different names.

The completion message concerns the write operation. It does not assert that someone opened the file or that the layout passed review.

Check cells in the actual output

Open the resulting file in the PowerPoint environment your colleagues use. For the supplied fixture, confirm that Recorders has quantity 6 at Desk A and Headphones has quantity 12 at Desk B. Select a quantity cell and verify that its text can be edited as table content.

Then add enough real rows to cross a slide boundary. Inspect the last row on the first slide and the first row on the next slide: no allocation should disappear or be counted twice. Check repeated headers, long equipment names, column widths, and the bottom margin. Slide count alone cannot reveal a clipped collection point.

If a single row is taller than the usable slide area, shorten its presentation text or split the information deliberately. Preserve the full instruction elsewhere if shortening would remove a safety condition or change who collects an item.

Keep conversion limits visible in the plan

The documented table route supports cell styling, with limits including word-level formatting and nested tables. Test the formatting your actual table uses rather than promising browser-identical output. An animated chart beside the table remains a separate slide-authoring task.

For an existing complete HTML deck, HTML presentation conversion choices explain outline and image routes. For this table export, keep the HTML data as the maintained source, open the generated deck, and check the cells and slide boundaries before circulating the .pptx.