High-Fidelity HTML to PowerPoint Converter in JavaScript – dom-to-pptx

dom-to-pptx is a lightweight, zero-dependency JavaScript library that converts HTML elements into fully editable PowerPoint presentations with high fidelity.

The library traverses the DOM, calculates the exact computed styles of every element, and mathematically maps them to PowerPoint shapes and text boxes.

It’s ideal for developers who need to generate professional, editable reports directly from a web view.

Features:

• High-Fidelity Style Conversion: Parses CSS gradient strings with multiple color stops and angles, converting them to vector SVG representations for PowerPoint.
• Polar Shadow Transformation: Converts Cartesian CSS shadow coordinates (x, y, blur) into PowerPoint’s polar system (angle, distance) for accurate depth rendering.
• Anti-Halo Image Processing: Uses HTML5 Canvas with composite masking to render rounded images without white border artifacts.
• Automatic Scaling Engine: Accepts HTML at any resolution (recommended 1920×1080) and calculates the scaling factor to fit standard PowerPoint slide dimensions.
• Rich Text Block Support: Preserves inline styling variations (bold, italic, color changes) while sanitizing source whitespace to prevent alignment issues.
• Font Stack Normalization: Maps web-specific font families like ui-sans-serif and system-ui to PowerPoint-compatible system fonts.
• Multi-Slide Export: Processes arrays of DOM elements to create presentations with multiple slides from a single function call.
• Zero Server Dependencies: Executes all processing client-side using browser APIs and the PptxGenJS library.

Use Cases:

• Dashboard Reporting: Export data visualization dashboards with charts, tables, and styled cards directly to PowerPoint for executive presentations without losing interactivity metadata.
• Design System Documentation: Generate presentation decks from component libraries where each slide showcases a different UI pattern with accurate styling.
• Automated Report Generation: Create recurring business reports where web-based data views need to be distributed as editable presentation files for stakeholder annotation.
• Educational Content Creation: Transform interactive web tutorials or course materials into PowerPoint format for offline distribution or classroom projection.

How To Use It:

1. Install the dom-to-pptx package via NPM and import it into your project:

# NPM
$ npm install dom-to-pptx

import { exportToPptx } from 'dom-to-pptx';

2. Enable a download button to convert one HTML container into a PowerPoint file.

document.getElementById('download-btn').addEventListener('click', async () => {
  // Pass CSS selector of container to convert
  // Library will analyze all child elements and their computed styles
  await exportToPptx('#slide-container', {
    fileName: 'dashboard-report.pptx', // Output filename
    background: '#000000', // defaults to null
  });
});

3. To create a presentation with multiple slides, pass an array of elements or selectors:

document.getElementById('export-btn').addEventListener('click', async () => {
  // Query all elements with 'slide' class
  const slideElements = document.querySelectorAll('.slide');
  // Convert NodeList to Array and pass to function
  // Each element becomes a separate slide in the output
  await exportToPptx(Array.from(slideElements), {
    fileName: 'multi-slide-presentation.pptx',
  });
});

4. For projects without a build system, include the UMD bundles directly:

To use local source, run ‘npm run build’ and point to ‘./dist/dom-to-pptx.min.js’

<!-- Load PptxGenJS first (required dependency) -->
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@latest/dist/pptxgen.bundle.js"></script>

<!-- Load dom-to-pptx UMD bundle -->
<script src="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/dom-to-pptx.min.js"></script>

document.getElementById('download-btn').addEventListener('click', async () => {
  // Library exposes global 'domToPptx' object
  await domToPptx.exportToPptx('#slide-container', {
    fileName: 'dashboard-report.pptx',
  });
});

5. Build your slide container at 1920×1080 pixels for optimal results. The library handles downscaling automatically:

<!-- Container with 16:9 aspect ratio (1000x562 scales to standard slide) -->
<div
  id="slide-container"
  class="slide w-[1000px] h-[562px] bg-white mx-auto shadow-xl relative overflow-hidden rounded-lg flex items-center justify-center p-10"
>
  <!-- Library captures this container's background automatically -->
  <div class="w-full max-w-3xl bg-white rounded-2xl shadow-xl overflow-hidden grid md:grid-cols-2 items-center border-l-2 border-indigo-500">
    <div class="p-12">
      <h2 class="text-xl font-semibold text-indigo-500 uppercase tracking-wide mb-2">
        Core Concept
      </h2>
      <h3 class="text-4xl font-bold text-slate-800 mb-6">From Bit to Qubit</h3>
      <!-- Mixed-style text blocks are preserved with inline formatting -->
      <div class="space-y-6 text-slate-600">
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center font-bold text-slate-700">
            B
          </div>
          <div>
            <h4 class="font-bold text-slate-700">Classical Bit</h4>
            <p>
              A fundamental unit of information that is either
              <span class="font-semibold text-indigo-600">0</span> or
              <span class="font-semibold text-indigo-600">1</span>.
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Images with rounded corners are processed via Canvas masking -->
    <div class="h-64 md:h-full">
      <img
        src="https://picsum.photos/800/600?random=2"
        alt="Stylized representation of a qubit"
        class="w-full h-full object-cover"
      />
    </div>
  </div>
</div>

Alternatives:

• html2canvas + jsPDF: Renders HTML to a Canvas element, then embeds the rasterized image in a PDF or PPTX. The output is a non-editable image rather than native shapes and text.
• PptxGenJS: The underlying library that dom-to-pptx uses for PPTX file creation. PptxGenJS provides low-level APIs for creating slides but does not include HTML parsing or style computation features.

FAQs:

Q: Why do my external images appear blank in the generated PowerPoint file?
A: This occurs when images are blocked by CORS restrictions. Make sure your image server returns Access-Control-Allow-Origin: * headers, or host images on the same domain as your application.

Q: How do I ensure my custom web fonts appear correctly in the PowerPoint file?
A: PowerPoint files reference fonts by name and depend on the viewer’s system having them installed. If you use a web font that isn’t a system font, specify a fallback stack in your CSS: font-family: 'Inter', Arial, sans-serif. The library automatically normalizes browser-specific stacks like system-ui to Arial for better compatibility.

Q: How do I create a presentation with different layouts on each slide?
A: Structure your HTML with multiple containers that each represent a slide, then pass an array of those containers to exportToPptx(). Each container can have completely different styling, dimensions, and content. The library processes them independently and creates separate slides with appropriate scaling for each.

Q: What happens if my HTML container is larger than the recommended 1920×1080 size?
A: The library calculates a scaling ratio to fit your content into PowerPoint’s standard slide dimensions (10 x 5.625 inches at 96 DPI). Larger source dimensions result in more aggressive downscaling. This can cause text to become smaller and details to be compressed.

The post High-Fidelity HTML to PowerPoint Converter in JavaScript – dom-to-pptx appeared first on CSS Script.