@microlee666/dom-to-pptx 1.1.4 → 1.1.6

package/src/index.js

@@ -25,13 +25,68 @@ import {
   getUsedFontFamilies,
   getAutoDetectedFonts,
   extractTableData,
-  computeTableCellFill
+  computeTableCellFill,
+  buildChartRegistry
 } from './utils.js';
 import { getProcessedImage } from './image-processor.js';
 
 const PPI = 96;
 const PX_TO_INCH = 1 / PPI;
 
+/**
+ * Fix Chinese font attributes (pitchFamily and charset) in PPTX XML.
+ * PptxGenJS sometimes generates incorrect charset="0" for East Asian fonts.
+ * @param {Blob} blob - The PPTX blob
+ * @returns {Promise<Blob>} - Fixed PPTX blob
+ */
+async function fixChineseFontAttributes(blob) {
+  const zip = await JSZip.loadAsync(blob);
+  const cjkFonts = ['Heiti TC', 'Heiti SC', 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun'];
+
+  // Process all slide XML files
+  const slideFiles = Object.keys(zip.files).filter(name =>
+    name.startsWith('ppt/slides/slide') && name.endsWith('.xml')
+  );
+
+  for (const slidePath of slideFiles) {
+    let xml = await zip.file(slidePath).async('text');
+    let modified = false;
+
+    // Fix <a:ea> and <a:cs> tags for CJK fonts
+    // Replace tags that have charset="0" (incorrect for CJK) with proper values
+    for (const fontName of cjkFonts) {
+      // Fix <a:ea> - East Asian font
+      const eaPattern = new RegExp(
+        `<a:ea typeface="${fontName}"[^>]*>`,
+        'g'
+      );
+      xml = xml.replace(eaPattern, `<a:ea typeface="${fontName}" pitchFamily="34" charset="-122"/>`);
+
+      // Fix <a:cs> - Complex Script font
+      const csPattern = new RegExp(
+        `<a:cs typeface="${fontName}"[^>]*>`,
+        'g'
+      );
+      xml = xml.replace(csPattern, `<a:cs typeface="${fontName}" pitchFamily="34" charset="-120"/>`);
+
+      // Fix <a:latin> - Latin font (if it's a CJK font used as Latin)
+      const latinPattern = new RegExp(
+        `<a:latin typeface="${fontName}"[^>]*>`,
+        'g'
+      );
+      xml = xml.replace(latinPattern, `<a:latin typeface="${fontName}" pitchFamily="34" charset="0"/>`);
+    }
+    modified = true;
+
+    if (modified) {
+      zip.file(slidePath, xml);
+    }
+  }
+
+  // Generate new blob
+  return await zip.generateAsync({ type: 'blob' });
+}
+
 /**
  * Main export function.
  * @param {HTMLElement | string | Array<HTMLElement | string>} target
@@ -56,6 +111,7 @@ export async function exportToPptx(target, options = {}) {
   if (!PptxConstructor) throw new Error('PptxGenJS constructor not found.');
   const pptx = new PptxConstructor();
   pptx.layout = 'LAYOUT_16x9';
+  pptx.language = 'zh-CN';
 
   const elements = Array.isArray(target) ? target : [target];
 
@@ -130,6 +186,9 @@ export async function exportToPptx(target, options = {}) {
     finalBlob = await pptx.write({ outputType: 'blob' });
   }
 
+  // Fix Chinese font attributes (pitchFamily and charset) in all slide XMLs
+  finalBlob = await fixChineseFontAttributes(finalBlob);
+
   // 4. Output Handling
   // If skipDownload is NOT true, proceed with browser download
   if (!options.skipDownload) {
@@ -171,6 +230,9 @@ async function processSlide(root, slide, pptx, globalOptions = {}) {
     offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
   };
 
+  const chartRegistry = buildChartRegistry(root, globalOptions.chartConfigs);
+  const slideOptions = { ...globalOptions, chartRegistry };
+
   const renderQueue = [];
   const asyncTasks = []; // Queue for heavy operations (Images, Canvas)
   let domOrderCounter = 0;
@@ -206,7 +268,7 @@ async function processSlide(root, slide, pptx, globalOptions = {}) {
       pptx,
       currentZ,
       nodeStyle,
-      globalOptions
+      slideOptions
     );
 
     if (result) {
@@ -252,6 +314,10 @@ async function processSlide(root, slide, pptx, globalOptions = {}) {
     if (item.type === 'shape') slide.addShape(item.shapeType, item.options);
     if (item.type === 'image') slide.addImage(item.options);
     if (item.type === 'text') slide.addText(item.textParts, item.options);
+    if (item.type === 'chart') {
+      const chartType = PptxGenJS.ChartType?.[item.chartType] ?? item.chartType;
+      slide.addChart(chartType, item.chartData, item.options);
+    }
     if (item.type === 'table') {
       slide.addTable(item.tableData.rows, {
         x: item.options.x,
@@ -452,13 +518,23 @@ function prepareRenderItem(
     range.detach();
 
     const style = window.getComputedStyle(parent);
-    const widthPx = rect.width;
-    const heightPx = rect.height;
+    // Use parent element's rect for better width calculation
+    // This is especially important for flex children where text node rect may be too narrow
+    const parentRect = parent.getBoundingClientRect();
+    const useParentRect = parentRect.width > rect.width;
+    let widthPx = useParentRect ? parentRect.width : rect.width;
+    const heightPx = useParentRect ? parentRect.height : rect.height;
+
+    // Add extra width buffer to prevent text wrapping in PPTX due to font rendering differences
+    // Chinese characters and certain fonts need more space in PPTX than in browser
+    widthPx = widthPx * 1.3; // Add 30% extra width
     const unrotatedW = widthPx * PX_TO_INCH * config.scale;
     const unrotatedH = heightPx * PX_TO_INCH * config.scale;
 
-    const x = config.offX + (rect.left - config.rootX) * PX_TO_INCH * config.scale;
-    const y = config.offY + (rect.top - config.rootY) * PX_TO_INCH * config.scale;
+    // Use parent rect's position if we're using parent dimensions
+    const sourceRect = useParentRect ? parentRect : rect;
+    const x = config.offX + (sourceRect.left - config.rootX) * PX_TO_INCH * config.scale;
+    const y = config.offY + (sourceRect.top - config.rootY) * PX_TO_INCH * config.scale;
 
     return {
       items: [
@@ -497,7 +573,7 @@ function prepareRenderItem(
   const elementOpacity = parseFloat(style.opacity);
   const safeOpacity = isNaN(elementOpacity) ? 1 : elementOpacity;
 
-  const widthPx = node.offsetWidth || rect.width;
+  let widthPx = node.offsetWidth || rect.width;
   const heightPx = node.offsetHeight || rect.height;
   const unrotatedW = widthPx * PX_TO_INCH * config.scale;
   const unrotatedH = heightPx * PX_TO_INCH * config.scale;
@@ -511,8 +587,41 @@ function prepareRenderItem(
 
   const items = [];
 
-  if (node.tagName === 'TABLE') {
-    const tableData = extractTableData(node, config.scale, { ...globalOptions, root: config.root });
+  const chartConfig = globalOptions.chartRegistry?.get(node);
+  if (chartConfig) {
+    const chartOptions = {
+      ...chartConfig.chartOptions,
+      x,
+      y,
+      w: unrotatedW,
+      h: unrotatedH,
+    };
+
+    return {
+      items: [
+        {
+          type: 'chart',
+          zIndex: effectiveZIndex,
+          domOrder,
+          chartType: chartConfig.chartType,
+          chartData: chartConfig.chartData,
+          options: chartOptions,
+        },
+      ],
+      stopRecursion: true,
+    };
+  }
+
+  // --- Handle both native TABLE and div-based table structures ---
+  const isTableLike = node.tagName === 'TABLE' || detectTableLikeStructure(node);
+  if (isTableLike) {
+    let tableData;
+    if (node.tagName === 'TABLE') {
+      tableData = extractTableData(node, config.scale, { ...globalOptions, root: config.root });
+    } else {
+      // Extract data from div-based table structure
+      tableData = extractDivTableData(node, config.scale, { ...globalOptions, root: config.root });
+    }
     const cellBgItems = [];
     const renderCellBg = globalOptions.tableConfig?.renderCellBackgrounds !== false;
 
@@ -856,6 +965,36 @@ function prepareRenderItem(
     return { items: [item], job, stopRecursion: true };
   }
 
+  // --- Handle vertical stat cards (like .mini-stat with number + label) ---
+  if (isVerticalStatCard(node)) {
+    // Capture the entire stat card as an image to preserve vertical layout
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null },
+    };
+    const job = async () => {
+      const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+      if (pngData) item.options.data = pngData;
+      else item.skip = true;
+    };
+    return { items: [item], job, stopRecursion: true };
+  }
+
+  // --- Handle absolutely positioned children that overflow parent ---
+  // Check if this element has absolutely positioned children that extend outside
+  const overflowingChildren = detectOverflowingChildren(node);
+  if (overflowingChildren.length > 0) {
+    // Process this node normally, but also capture overflowing children separately
+    const baseResult = processOverflowingContent(
+      node, overflowingChildren, config, domOrder, pptx, zIndex, style, globalOptions
+    );
+    if (baseResult) {
+      return baseResult;
+    }
+  }
+
   // Radii logic
   const borderRadiusValue = parseFloat(style.borderRadius) || 0;
   const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;
@@ -958,6 +1097,27 @@ function prepareRenderItem(
   let textPayload = null;
   const isText = isTextContainer(node);
 
+  // Add extra width buffer for inline text elements to prevent wrapping in PPTX
+  // This is especially needed for Chinese text and certain fonts
+  // Only apply to elements that are direct children of flex containers with space distribution
+  // and don't have a parent with visible background (to avoid overflowing card boundaries)
+  if (isText && !bgColorObj.hex && !hasBorder && !hasShadow) {
+    const parentEl = node.parentElement;
+    if (parentEl) {
+      const parentStyle = window.getComputedStyle(parentEl);
+      const parentDisplay = parentStyle.display || '';
+      const parentJustify = parentStyle.justifyContent || '';
+      const isFlexWithSpaceDist = (parentDisplay.includes('flex') || parentDisplay.includes('grid')) &&
+        (parentJustify.includes('space-between') || parentJustify.includes('space-around') || parentJustify.includes('space-evenly'));
+
+      if (isFlexWithSpaceDist) {
+        widthPx = widthPx * 1.3; // Add 30% extra width
+        // Recalculate w with the new width
+        w = widthPx * PX_TO_INCH * config.scale;
+      }
+    }
+  }
+
   if (isText) {
     const textParts = [];
     let trimNextLeading = false;
@@ -1014,8 +1174,91 @@ function prepareRenderItem(
       let align = style.textAlign || 'left';
       if (align === 'start') align = 'left';
       if (align === 'end') align = 'right';
+
+      // Fix: If this element is a flex/grid child and has no explicit text-align,
+      // force left alignment to match HTML default behavior
+      if (node.parentElement && (!style.textAlign || style.textAlign === 'start')) {
+        const parentStyle = window.getComputedStyle(node.parentElement);
+        if (parentStyle.display.includes('flex') || parentStyle.display.includes('grid')) {
+          align = 'left';
+        }
+      }
+
+      // Detect badge/pill buttons (high border-radius + short text) and auto-center them
+      const borderRadius = parseFloat(style.borderRadius) || 0;
+      const height = parseFloat(style.height) || node.offsetHeight;
+      const textContent = node.textContent.trim();
+      const className = (node.className || '').toLowerCase();
+
+      // Real badges/pills typically have visible styling (background, border, or large border-radius)
+      const hasVisibleBackground = (bgColorObj.hex && bgColorObj.opacity > 0.1) || hasGradient;
+      const hasVisibleBorder = borderWidth > 0;
+      const hasLargeBorderRadius = borderRadius >= height / 2;
+      const hasBadgeClass = className.includes('badge') || className.includes('pill') || className.includes('tag');
+
+      // Check if it's a small tag/label with rounded corners and short text
+      const paddingLeft = parseFloat(style.paddingLeft) || 0;
+      const paddingRight = parseFloat(style.paddingRight) || 0;
+      const paddingTop = parseFloat(style.paddingTop) || 0;
+      const paddingBottom = parseFloat(style.paddingBottom) || 0;
+      const hasSmallPadding = Math.max(paddingLeft, paddingRight, paddingTop, paddingBottom) <= 12;
+      const hasEvenPadding = Math.abs(paddingTop - paddingBottom) <= 4 && Math.abs(paddingLeft - paddingRight) <= 8;
+      const hasRoundedCorners = borderRadius >= 3;
+      const isInlineBlock = style.display === 'inline-block' || style.display === 'inline-flex';
+
+      // Small tag detection: inline-block with background, rounded corners, small even padding, and short text
+      const isSmallTag =
+        isInlineBlock &&
+        hasVisibleBackground &&
+        hasRoundedCorners &&
+        hasSmallPadding &&
+        hasEvenPadding &&
+        textContent.length <= 10;
+
+      // Only consider it a badge if it has visual styling AND short text
+      const isLikelyBadge =
+        ((hasLargeBorderRadius || hasBadgeClass) &&
+          textContent.length <= 10 &&
+          (hasVisibleBackground || hasVisibleBorder || hasLargeBorderRadius)) ||
+        isSmallTag;
+
+      if (isLikelyBadge) {
+        align = 'center';
+      }
+
       let valign = 'top';
-      if (style.alignItems === 'center') valign = 'middle';
+
+      // For flex items, valign should be determined by PARENT's align-items, not self
+      // Self's align-items controls how children are aligned, not self's position in parent
+      const parentEl = node.parentElement;
+      if (parentEl) {
+        const parentStyle = window.getComputedStyle(parentEl);
+        if (parentStyle.display.includes('flex')) {
+          // Parent's align-items controls this element's cross-axis alignment
+          if (parentStyle.alignItems === 'center') {
+            valign = 'middle';
+          } else if (parentStyle.alignItems === 'flex-end' || parentStyle.alignItems === 'end') {
+            valign = 'bottom';
+          }
+          // Default (stretch, flex-start) keeps valign = 'top'
+        }
+      }
+
+      // If element is not a flex item (no flex parent), then its own align-items
+      // might indicate self-centering intent for single-element containers
+      if (valign === 'top' && style.alignItems === 'center' && !parentEl) {
+        valign = 'middle';
+      }
+
+      // Auto-center vertically for likely badges
+      if (isLikelyBadge && valign !== 'middle') {
+        const paddingTop = parseFloat(style.paddingTop) || 0;
+        const paddingBottom = parseFloat(style.paddingBottom) || 0;
+        // If padding is relatively even, assume vertical centering is intended
+        if (Math.abs(paddingTop - paddingBottom) <= 4) {
+          valign = 'middle';
+        }
+      }
       if (style.justifyContent === 'center' && style.display.includes('flex')) align = 'center';
 
       const pt = parseFloat(style.paddingTop) || 0;
@@ -1374,3 +1617,280 @@ function createCompositeBorderItems(sides, x, y, w, h, scale, zIndex, domOrder)
 
   return items;
 }
+
+/**
+ * Detect absolutely positioned children that overflow their parent
+ * This handles cases like chart value labels positioned above bars
+ */
+function detectOverflowingChildren(node) {
+  const overflowing = [];
+  const parentRect = node.getBoundingClientRect();
+
+  // Only check for elements with specific class patterns that suggest chart values
+  const children = node.querySelectorAll('.bar-value, [class*="value"], [class*="label"]');
+
+  children.forEach(child => {
+    const childStyle = window.getComputedStyle(child);
+    const childRect = child.getBoundingClientRect();
+
+    // Check if absolutely positioned and outside parent bounds
+    if (childStyle.position === 'absolute') {
+      const isOutside =
+        childRect.bottom < parentRect.top ||
+        childRect.top > parentRect.bottom ||
+        childRect.right < parentRect.left ||
+        childRect.left > parentRect.right;
+
+      if (isOutside || childRect.top < parentRect.top) {
+        overflowing.push(child);
+      }
+    }
+  });
+
+  return overflowing;
+}
+
+/**
+ * Process content with overflowing children
+ * Captures the entire visual area including overflowing elements
+ */
+function processOverflowingContent(node, overflowingChildren, config, domOrder, pptx, zIndex, style, globalOptions) {
+  // Calculate bounding box that includes all overflowing children
+  const rect = node.getBoundingClientRect();
+  let minX = rect.left;
+  let minY = rect.top;
+  let maxX = rect.right;
+  let maxY = rect.bottom;
+
+  overflowingChildren.forEach(child => {
+    const childRect = child.getBoundingClientRect();
+    minX = Math.min(minX, childRect.left);
+    minY = Math.min(minY, childRect.top);
+    maxX = Math.max(maxX, childRect.right);
+    maxY = Math.max(maxY, childRect.bottom);
+  });
+
+  const totalWidth = maxX - minX;
+  const totalHeight = maxY - minY;
+
+  // Use html2canvas to capture the entire area
+  const item = {
+    type: 'image',
+    zIndex,
+    domOrder,
+    options: {
+      x: config.offX + (minX - config.rootX) * PX_TO_INCH * config.scale,
+      y: config.offY + (minY - config.rootY) * PX_TO_INCH * config.scale,
+      w: totalWidth * PX_TO_INCH * config.scale,
+      h: totalHeight * PX_TO_INCH * config.scale,
+      data: null
+    }
+  };
+
+  const job = async () => {
+    try {
+      // Temporarily adjust node position for capture
+      const originalPosition = node.style.position;
+      const originalTransform = node.style.transform;
+
+      node.style.position = 'relative';
+      node.style.transform = 'none';
+
+      const canvas = await html2canvas(node, {
+        backgroundColor: null,
+        logging: false,
+        scale: 2,
+        useCORS: true,
+        x: minX - rect.left,
+        y: minY - rect.top,
+        width: totalWidth,
+        height: totalHeight
+      });
+
+      // Restore original styles
+      node.style.position = originalPosition;
+      node.style.transform = originalTransform;
+
+      item.options.data = canvas.toDataURL('image/png');
+    } catch (e) {
+      console.warn('Failed to capture overflowing content:', e);
+      item.skip = true;
+    }
+  };
+
+  return { items: [item], job, stopRecursion: true };
+}
+
+/**
+ * Detect vertical stat cards (like .mini-stat with number above label)
+ * These have block-level children that should stack vertically
+ */
+function isVerticalStatCard(node) {
+  const className = (node.className || '').toLowerCase();
+
+  // Check for stat-like class names
+  const statIndicators = ['stat', 'metric', 'kpi', 'data-item', 'stat-item'];
+  const hasStatClass = statIndicators.some(indicator => className.includes(indicator));
+
+  if (!hasStatClass) return false;
+
+  const children = Array.from(node.children);
+  if (children.length !== 2) return false;
+
+  // Check if children are likely number + label pair
+  const child1 = children[0];
+  const child2 = children[1];
+
+  const style1 = window.getComputedStyle(child1);
+  const style2 = window.getComputedStyle(child2);
+
+  // Both should be block elements (or have block-like display)
+  const isBlock1 = style1.display === 'block' || style1.display === 'flex';
+  const isBlock2 = style2.display === 'block' || style2.display === 'flex';
+
+  if (!isBlock1 || !isBlock2) return false;
+
+  // First child should have larger font (the number)
+  const fontSize1 = parseFloat(style1.fontSize) || 0;
+  const fontSize2 = parseFloat(style2.fontSize) || 0;
+
+  // Number should be larger than label, or at least bold
+  const isBold1 = parseInt(style1.fontWeight) >= 600;
+
+  return fontSize1 >= fontSize2 || isBold1;
+}
+
+/**
+ * Detect if a div structure looks like a table
+ * Checks for table-like class names and structure patterns
+ */
+function detectTableLikeStructure(node) {
+  const className = (node.className || '').toLowerCase();
+
+  // Check for table-related class names
+  const tableIndicators = ['table', 'data-table', 'grid', 'list'];
+  const hasTableClass = tableIndicators.some(indicator => className.includes(indicator));
+
+  if (!hasTableClass) return false;
+
+  // Check structure: should have header row and data rows
+  const children = Array.from(node.children);
+
+  // Look for header-like element
+  const hasHeader = children.some(child =>
+    (child.className || '').toLowerCase().includes('header') ||
+    child.tagName === 'THEAD'
+  );
+
+  // Look for row-like elements
+  const hasRows = children.some(child =>
+    (child.className || '').toLowerCase().includes('row') ||
+    child.tagName === 'TR' ||
+    child.tagName === 'TBODY'
+  );
+
+  // Check for cell-like structure in children
+  const hasCellStructure = children.some(child => {
+    const childChildren = Array.from(child.children);
+    return childChildren.some(grandchild =>
+      (grandchild.className || '').toLowerCase().includes('cell') ||
+      grandchild.className.toLowerCase().includes('col') ||
+      grandchild.className.toLowerCase().includes('td')
+    );
+  });
+
+  return (hasHeader || hasRows) && hasCellStructure;
+}
+
+/**
+ * Extract table data from div-based table structure
+ * Similar to extractTableData but for div grids
+ */
+function extractDivTableData(node, scale, options = {}) {
+  const rows = [];
+  const colWidths = [];
+  const root = options.root || null;
+
+  // Find header row
+  const headerRow = node.querySelector('.table-header, [class*="header"]');
+  if (headerRow) {
+    const headerCells = Array.from(headerRow.children);
+    headerCells.forEach((cell, index) => {
+      const rect = cell.getBoundingClientRect();
+      const wIn = rect.width * (1 / 96) * scale;
+      colWidths[index] = wIn;
+    });
+
+    // Process header as first row
+    const headerData = headerCells.map(cell => {
+      const style = window.getComputedStyle(cell);
+      const cellText = cell.innerText.replace(/[\n\r\t]+/g, ' ').trim();
+      const textStyle = getTextStyle(style, scale, cellText, options);
+      const fill = computeTableCellFill(style, cell, root, options);
+
+      return {
+        text: cellText,
+        options: {
+          ...textStyle,
+          fill: fill || { color: '16A085', transparency: 80 },
+          bold: true,
+          align: style.textAlign === 'center' ? 'center' : 'left',
+          border: { type: 'none' }
+        }
+      };
+    });
+    rows.push(headerData);
+  }
+
+  // Find data rows
+  const dataRows = node.querySelectorAll('.table-row, [class*="row"]');
+  dataRows.forEach(row => {
+    const cells = Array.from(row.children);
+    const rowData = cells.map(cell => {
+      const style = window.getComputedStyle(cell);
+      const cellText = cell.innerText.replace(/[\n\r\t]+/g, ' ').trim();
+      const textStyle = getTextStyle(style, scale, cellText, options);
+      const fill = computeTableCellFill(style, cell, root, options);
+
+      // Detect trend colors
+      const className = (cell.className || '').toLowerCase();
+      let textColor = textStyle.color;
+      if (className.includes('up') || className.includes('positive')) {
+        textColor = '16A085';
+      } else if (className.includes('down') || className.includes('negative')) {
+        textColor = 'E74C3C';
+      }
+
+      return {
+        text: cellText,
+        options: {
+          ...textStyle,
+          color: textColor,
+          fill: fill,
+          align: style.textAlign === 'center' ? 'center' : 'left',
+          border: {
+            type: 'none',
+            bottom: { type: 'solid', pt: 0.5, color: 'FFFFFF', transparency: 95 }
+          }
+        }
+      };
+    });
+
+    if (rowData.length > 0) {
+      rows.push(rowData);
+    }
+  });
+
+  // Ensure all rows have same column count
+  const maxCols = Math.max(...rows.map(r => r.length), colWidths.length);
+  rows.forEach(row => {
+    while (row.length < maxCols) {
+      row.push({ text: '', options: {} });
+    }
+  });
+  while (colWidths.length < maxCols) {
+    colWidths.push(colWidths[colWidths.length - 1] || 1);
+  }
+
+  return { rows, colWidths };
+}