dom-to-pptx 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Atharva Dharmendra Jagtap and dom-to-pptx contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Readme.md

@@ -0,0 +1,110 @@
+# dom-to-pptx
+
+**The High-Fidelity HTML to PowerPoint Converter.**
+
+Most HTML-to-PPTX libraries fail when faced with modern web design. They break on gradients, misalign text, ignore rounded corners, or simply take a screenshot (which isn't editable). 
+
+**dom-to-pptx** is different. It is a **Coordinate Scraper & Style Engine** that traverses your DOM, calculates the exact computed styles of every element (Flexbox/Grid positions, complex gradients, shadows), and mathematically maps them to native PowerPoint shapes and text boxes. The result is a fully editable, vector-sharp presentation that looks exactly like your web view.
+
+## Features
+
+### 🎨 Advanced Visual Fidelity
+- **Complex Gradients:** Includes a built-in CSS Gradient Parser that converts `linear-gradient` strings (with multiple stops, angles, and transparency) into vector SVGs for perfect rendering.
+- **Mathematically Accurate Shadows:** Converts CSS Cartesian shadows (`x`, `y`, `blur`) into PowerPoint's Polar coordinate system (`angle`, `distance`) for 1:1 depth matching.
+- **Anti-Halo Image Processing:** Uses off-screen HTML5 Canvas with `source-in` composite masking to render rounded images without the ugly white "halo" artifacts found in other libraries.
+
+### 📐 Smart Layout & Typography
+- **Auto-Scaling Engine:** Build your slide in HTML at **1920x1080** (or any aspect ratio). The library automatically calculates the scaling factor to fit it perfectly into a standard 16:9 PowerPoint slide (10 x 5.625 inches) with auto-centering.
+- **Rich Text Blocks:** Handles mixed-style text (e.g., **bold** spans inside a normal paragraph) while sanitizing HTML source code whitespace (newlines/tabs) to prevent jagged text alignment.
+- **Font Stack Normalization:** Automatically maps web-only fonts (like `ui-sans-serif`, `system-ui`) to safe system fonts (`Arial`, `Calibri`) to ensure the file opens correctly on any computer.
+- **Text Transformations:** Supports CSS `text-transform: uppercase/lowercase` and `letter-spacing` (converted to PT).
+
+### ⚡ Technical Capabilities
+- **Z-Index Handling:** Respects DOM order for correct layering of elements.
+- **Border Radius Math:** Calculates perfect corner rounding percentages based on element dimensions.
+- **Client-Side:** Runs entirely in the browser. No server required.
+
+## Installation
+
+```bash
+npm install dom-to-pptx
+```
+
+## Usage
+
+This library is intended for use in the browser (React, Vue, Svelte, Vanilla JS, etc.).
+
+### 1. Basic Example
+
+```javascript
+import { exportToPptx } from 'dom-to-pptx';
+
+document.getElementById('download-btn').addEventListener('click', async () => {
+  // Pass the CSS selector of the container you want to turn into a slide
+  await exportToPptx('#slide-container', { 
+    fileName: 'dashboard-report.pptx' 
+  });
+});
+```
+
+### 2. Recommended HTML Structure
+For the best results, treat your container as a fixed-size canvas. We recommend building your slide at **1920x1080px**. The library will handle the downscaling.
+
+```html
+<!-- Container (16:9 Aspect Ratio) -->
+<!-- The library will capture this background color/gradient automatically -->
+<div id="slide-container" class="w-[1920px] h-[1080px] relative overflow-hidden bg-slate-50 font-sans">
+    
+    <!-- Background Gradient -->
+    <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-purple-100"></div>
+
+    <!-- Content -->
+    <div class="absolute top-[100px] left-[100px] w-[800px]">
+        <h1 class="text-6xl font-bold text-slate-800 drop-shadow-md">
+            Quarterly Report
+        </h1>
+        <p class="text-2xl text-slate-600 mt-4">
+            Analysis of <span class="font-bold text-blue-600">renewable energy</span> trends.
+        </p>
+    </div>
+
+    <!-- Rounded Image with Shadow (Renders perfectly without white edges) -->
+    <div class="absolute top-[100px] right-[100px] w-[600px] h-[400px] rounded-2xl shadow-2xl overflow-hidden">
+        <img 
+            src="https://example.com/image.jpg" 
+            class="w-full h-full object-cover"
+        />
+    </div>
+
+</div>
+```
+
+## API
+
+### `exportToPptx(elementOrSelector, options)`
+
+| Parameter | Type | Description |
+| :--- | :--- | :--- |
+| `elementOrSelector` | `string` \| `HTMLElement` | The DOM node (or ID selector) to convert. |
+| `options` | `object` | Configuration object. |
+
+**Options Object:**
+
+| Key | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `fileName` | `string` | `"slide.pptx"` | The name of the downloaded file. |
+| `backgroundColor` | `string` | `null` | Force a background color for the slide (hex). |
+
+## Important Notes
+
+1.  **CORS Images:** Because this library uses HTML5 Canvas to process rounded images, any external images must be served with `Access-Control-Allow-Origin: *` headers. If an image is "tainted" (CORS blocked), the browser will refuse to read its data, and it may appear blank in the PPTX.
+2.  **Layout System:** The library does not "read" Flexbox or Grid definitions directly. Instead, it lets the browser render the layout, measures the final `x, y, width, height` (BoundingBox) of every element, and places them absolutely on the slide. This ensures 100% visual accuracy regardless of the layout method used.
+3.  **Fonts:** PPTX files use the fonts installed on the viewer's OS. If you use a web font like "Inter", and the user doesn't have it installed, PowerPoint will fallback to Arial.
+
+## License
+
+MIT © [Atharva Dharmendra Jagtap](https://github.com/atharva9167j)
+
+## Acknowledgements
+
+This project is built on top of [PptxGenJS](https://github.com/gitbrent/PptxGenJS). Huge thanks to the PptxGenJS maintainers and all contributors — dom-to-pptx leverages and extends their excellent work on PPTX generation.

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "dom-to-pptx",
+  "version": "1.0.0",
+  "description": "A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts. It translates CSS Flexbox/Grid, linear-gradients, box-shadows, and typography into native PowerPoint shapes, enabling precise, design-faithful slide generation directly from the browser.",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atharva9167j/dom-to-pptx.git"
+  },
+"keywords": [
+  "pptx",
+  "html-to-pptx",
+  "powerpoint",
+  "pptx-generator",
+  "slide-generator",
+  "presentation-generator",
+  "dom",
+  "dom-to-pptx",
+  "export",
+  "browser-export",
+  "client-side-pptx",
+  "html-to-powerpoint",
+  "convert-html",
+  "css-to-pptx",
+  "css-to-powerpoint",
+  "pptx-creator",
+  "presentation-tools",
+  "slides",
+  "slide-creation",
+  "web-to-pptx",
+  "web-to-powerpoint",
+  "frontend-pptx",
+  "html-rendering",
+  "layout-engine",
+  "gradient-support",
+  "flexbox",
+  "css-grid",
+  "typography"
+],
+  "author": "Atharva Dharmendra Jagtap <atharvaj321@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/atharva9167j/dom-to-pptx/issues"
+  },
+  "homepage": "https://github.com/atharva9167j/dom-to-pptx#readme",
+  "dependencies": {
+    "pptxgenjs": "^3.12.0"
+  }
+}

package/src/image-processor.js

@@ -0,0 +1,48 @@
+// src/image-processor.js
+
+export async function getProcessedImage(src, targetW, targetH, radius) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = "Anonymous"; // Critical for canvas manipulation
+    
+    img.onload = () => {
+       const canvas = document.createElement('canvas');
+       // Double resolution for better quality
+       const scale = 2; 
+       canvas.width = targetW * scale;
+       canvas.height = targetH * scale;
+       const ctx = canvas.getContext('2d');
+       ctx.scale(scale, scale);
+
+       // 1. Draw the Mask (Rounded Rect)
+       ctx.beginPath();
+       if (ctx.roundRect) {
+         ctx.roundRect(0, 0, targetW, targetH, radius);
+       } else {
+         // Fallback for older browsers if needed
+         ctx.rect(0, 0, targetW, targetH);
+       }
+       ctx.fillStyle = '#000';
+       ctx.fill();
+
+       // 2. Composite Source-In
+       ctx.globalCompositeOperation = 'source-in';
+
+       // 3. Draw Image (Object Cover Logic)
+       const wRatio = targetW / img.width;
+       const hRatio = targetH / img.height;
+       const maxRatio = Math.max(wRatio, hRatio);
+       const renderW = img.width * maxRatio;
+       const renderH = img.height * maxRatio;
+       const renderX = (targetW - renderW) / 2;
+       const renderY = (targetH - renderH) / 2;
+
+       ctx.drawImage(img, renderX, renderY, renderW, renderH);
+
+       resolve(canvas.toDataURL('image/png'));
+    };
+    
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}

package/src/index.js

@@ -0,0 +1,181 @@
+// src/index.js
+import PptxGenJS from "pptxgenjs";
+import { parseColor, getTextStyle, isTextContainer, getVisibleShadow, generateGradientSVG } from "./utils.js";
+import { getProcessedImage } from "./image-processor.js";
+
+const PPI = 96;
+const PX_TO_INCH = 1 / PPI;
+
+/**
+ * Converts a DOM element to a PPTX file.
+ * @param {HTMLElement | string} elementOrSelector - The root element to convert.
+ * @param {Object} options - { fileName: string }
+ */
+export async function exportToPptx(elementOrSelector, options = {}) {
+  const root = typeof elementOrSelector === "string" 
+    ? document.querySelector(elementOrSelector) 
+    : elementOrSelector;
+
+  if (!root) throw new Error("Root element not found");
+
+  const pptx = new PptxGenJS();
+  pptx.layout = "LAYOUT_16x9"; // Default
+  const slide = pptx.addSlide();
+
+  // Use the dimensions of the root element to calculate scaling
+  const rootRect = root.getBoundingClientRect();
+  
+  // Standard PPTX 16:9 dimensions in inches
+  const PPTX_WIDTH_IN = 10;
+  const PPTX_HEIGHT_IN = 5.625;
+
+  const contentWidthIn = rootRect.width * PX_TO_INCH;
+  const contentHeightIn = rootRect.height * PX_TO_INCH;
+  
+  // Scale content to fit within the slide
+  const scale = Math.min(
+    PPTX_WIDTH_IN / contentWidthIn,
+    PPTX_HEIGHT_IN / contentHeightIn
+  );
+
+  const layoutConfig = {
+    rootX: rootRect.x,
+    rootY: rootRect.y,
+    scale: scale,
+    // Center the content
+    offX: (PPTX_WIDTH_IN - contentWidthIn * scale) / 2,
+    offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
+  };
+
+  await processNode(root, pptx, slide, layoutConfig);
+  
+  const fileName = options.fileName || "export.pptx";
+  pptx.writeFile({ fileName });
+}
+
+async function processNode(node, pptx, slide, config) {
+  if (node.nodeType !== 1) return; // Element nodes only
+  
+  const style = window.getComputedStyle(node);
+  if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return;
+
+  const rect = node.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return;
+
+  const x = config.offX + (rect.x - config.rootX) * PX_TO_INCH * config.scale;
+  const y = config.offY + (rect.y - config.rootY) * PX_TO_INCH * config.scale;
+  const w = rect.width * PX_TO_INCH * config.scale;
+  const h = rect.height * PX_TO_INCH * config.scale;
+
+  // --- 1. Detect Image Wrapper ---
+  let isImageWrapper = false;
+  const imgChild = Array.from(node.children).find(c => c.tagName === 'IMG');
+  if (imgChild) {
+      const imgRect = imgChild.getBoundingClientRect();
+      if (Math.abs(imgRect.width - rect.width) < 2 && Math.abs(imgRect.height - rect.height) < 2) {
+          isImageWrapper = true;
+      }
+  }
+
+  // --- 2. Backgrounds & Borders ---
+  let bgColor = parseColor(style.backgroundColor);
+  if (isImageWrapper && bgColor) bgColor = null; // Prevent halo
+
+  const hasGradient = style.backgroundImage && style.backgroundImage.includes("linear-gradient");
+  const borderColor = parseColor(style.borderColor);
+  const borderWidth = parseFloat(style.borderWidth);
+  const hasBorder = borderWidth > 0 && borderColor;
+  const shadowStr = style.boxShadow;
+  const hasShadow = shadowStr && shadowStr !== "none";
+  const borderRadius = parseFloat(style.borderRadius) || 0;
+
+  if (hasGradient) {
+    const svgData = generateGradientSVG(rect.width, rect.height, style.backgroundImage, borderRadius, hasBorder ? { color: borderColor, width: borderWidth } : null);
+    if (svgData) slide.addImage({ data: svgData, x, y, w, h });
+  } else if (bgColor || hasBorder || hasShadow) {
+    const isCircle = borderRadius >= Math.min(rect.width, rect.height) / 2 - 1;
+
+    const shapeOpts = {
+      x, y, w, h,
+      fill: bgColor ? { color: bgColor } : null,
+      line: hasBorder ? { color: borderColor, width: borderWidth * 0.75 * config.scale } : null,
+    };
+
+    if (hasShadow) {
+      const shadow = getVisibleShadow(shadowStr, config.scale);
+      if (shadow) shapeOpts.shadow = shadow;
+      
+      // Fix for shadow on transparent background (needed for PPTX to render shadow)
+      if (!bgColor && !hasBorder) {
+        if (style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)') {
+             shapeOpts.fill = { color: parseColor(style.backgroundColor) };
+        }
+      }
+    }
+
+    if (isCircle) {
+      slide.addShape(pptx.ShapeType.ellipse, shapeOpts);
+    } else if (borderRadius > 0) {
+      const radiusFactor = Math.min(1, borderRadius / (Math.min(rect.width, rect.height) / 1.75));
+      shapeOpts.rectRadius = radiusFactor;
+      slide.addShape(pptx.ShapeType.roundRect, shapeOpts);
+    } else {
+      slide.addShape(pptx.ShapeType.rect, shapeOpts);
+    }
+  }
+
+  // --- 3. Process Image ---
+  if (node.tagName === "IMG") {
+    let effectiveRadius = borderRadius;
+    // Check parent clipping if current img has no radius
+    if (effectiveRadius === 0) {
+        const parentStyle = window.getComputedStyle(node.parentElement);
+        if (parentStyle.overflow !== 'visible') {
+            effectiveRadius = parseFloat(parentStyle.borderRadius) || 0;
+        }
+    }
+
+    const processedImage = await getProcessedImage(node.src, rect.width, rect.height, effectiveRadius);
+    if (processedImage) {
+      slide.addImage({ data: processedImage, x, y, w, h });
+    }
+    return; // Don't process children of IMG
+  }
+
+  // --- 4. Process Text ---
+  if (isTextContainer(node)) {
+    const textParts = [];
+    node.childNodes.forEach((child, index) => {
+      let textVal = child.nodeType === 3 ? child.nodeValue : child.textContent;
+      let nodeStyle = child.nodeType === 1 ? window.getComputedStyle(child) : style;
+      
+      textVal = textVal.replace(/[\n\r\t]+/g, " ").replace(/\s{2,}/g, " ");
+      if (index === 0) textVal = textVal.trimStart();
+      if (index === node.childNodes.length - 1) textVal = textVal.trimEnd();
+
+      if (nodeStyle.textTransform === "uppercase") textVal = textVal.toUpperCase();
+      if (nodeStyle.textTransform === "lowercase") textVal = textVal.toLowerCase();
+
+      if (textVal.length > 0) {
+        textParts.push({ text: textVal, options: getTextStyle(nodeStyle, config.scale) });
+      }
+    });
+
+    if (textParts.length > 0) {
+      let align = style.textAlign || "left";
+      if (align === "start") align = "left";
+      if (align === "end") align = "right";
+      
+      let valign = "top";
+      if (style.alignItems === "center") valign = "middle"; // Flex approximation
+      
+      slide.addText(textParts, { x, y, w, h, align, valign, margin: 0, wrap: true, autoFit: false });
+    }
+    return;
+  }
+
+  // Recursive call
+  for (const child of node.children) {
+    await processNode(child, pptx, slide, config);
+  }
+}

package/src/utils.js

@@ -0,0 +1,114 @@
+// src/utils.js
+
+export function parseColor(str) {
+  if (!str || str === "transparent" || str.startsWith("rgba(0, 0, 0, 0)")) return null;
+  const rgb = str.match(/\d+/g);
+  if (!rgb || rgb.length < 3) return null;
+  // Convert RGB to Hex
+  return ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2]))
+    .toString(16).slice(1).toUpperCase();
+}
+
+export function getTextStyle(style, scale) {
+  return {
+    color: parseColor(style.color) || "000000",
+    fontFace: style.fontFamily.split(",")[0].replace(/['"]/g, ""),
+    fontSize: parseFloat(style.fontSize) * 0.75 * scale,
+    bold: parseInt(style.fontWeight) >= 600,
+  };
+}
+
+export function isTextContainer(node) {
+  const hasText = node.textContent.trim().length > 0;
+  if (!hasText) return false;
+  const children = Array.from(node.children);
+  if (children.length === 0) return true;
+  // Check if children are inline elements
+  const isInline = (el) => 
+    window.getComputedStyle(el).display.includes("inline") || 
+    ["SPAN", "B", "STRONG", "EM"].includes(el.tagName);
+  return children.every(isInline);
+}
+
+export function getVisibleShadow(shadowStr, scale) {
+  if (!shadowStr || shadowStr === "none") return null;
+  const shadows = shadowStr.split(/,(?![^(]*\))/);
+  
+  for (let s of shadows) {
+    s = s.trim();
+    if (s.startsWith("rgba(0, 0, 0, 0)")) continue;
+
+    const match = s.match(/(rgba?\([^\)]+\)|#[0-9a-fA-F]+)\s+(-?[\d\.]+)px\s+(-?[\d\.]+)px\s+([\d\.]+)px/);
+    if (match) {
+      const colorStr = match[1];
+      const x = parseFloat(match[2]);
+      const y = parseFloat(match[3]);
+      const blur = parseFloat(match[4]);
+      
+      const distance = Math.sqrt(x*x + y*y);
+      let angle = Math.atan2(y, x) * (180 / Math.PI);
+      if (angle < 0) angle += 360;
+
+      let opacity = 0.4;
+      if (colorStr.includes('rgba')) {
+          const alphaMatch = colorStr.match(/, ([0-9.]+)\)/);
+          if (alphaMatch) opacity = parseFloat(alphaMatch[1]);
+      }
+
+      return {
+        type: "outer",
+        angle: angle,
+        blur: blur * 0.75 * scale,
+        offset: distance * 0.75 * scale,
+        color: parseColor(colorStr) || "000000",
+        opacity: opacity,
+      };
+    }
+  }
+  return null;
+}
+
+export function generateGradientSVG(w, h, bgString, radius, border) {
+    try {
+      const match = bgString.match(/linear-gradient\((.*)\)/);
+      if (!match) return null;
+      const content = match[1];
+      // Basic gradient parsing logic (simplified from your script)
+      const parts = content.split(/,(?![^(]*\))/).map((p) => p.trim());
+      
+      let x1 = "0%", y1 = "0%", x2 = "0%", y2 = "100%";
+      let stopsStartIdx = 0;
+      
+      if (parts[0].includes("to right")) { x1 = "0%"; x2 = "100%"; y2 = "0%"; stopsStartIdx = 1; }
+      else if (parts[0].includes("to left")) { x1 = "100%"; x2 = "0%"; y2 = "0%"; stopsStartIdx = 1; }
+      // Add other directions as needed...
+
+      let stopsXML = "";
+      const stopParts = parts.slice(stopsStartIdx);
+      stopParts.forEach((part, idx) => {
+        let color = part;
+        let offset = Math.round((idx / (stopParts.length - 1)) * 100) + "%";
+        // Simple regex to separate color from percentage
+        const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
+        if (posMatch) { color = posMatch[1]; offset = posMatch[2]; }
+        
+        let opacity = 1;
+        if (color.includes("rgba")) {
+           // extract alpha
+           const rgba = color.match(/[\d\.]+/g);
+           if(rgba && rgba.length > 3) { opacity = rgba[3]; color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`; }
+        }
+        stopsXML += `<stop offset="${offset}" stop-color="${color}" stop-opacity="${opacity}"/>`;
+      });
+
+      let strokeAttr = "";
+      if (border) { strokeAttr = `stroke="#${border.color}" stroke-width="${border.width}"`; }
+
+      const svg = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+              <defs><linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">${stopsXML}</linearGradient></defs>
+              <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
+          </svg>`;
+      return "data:image/svg+xml;base64," + btoa(svg);
+    } catch (e) { return null; }
+}