feat: core html2pptx implementation

Rewrite with element-based DOM extraction (replacing TreeWalker text node approach), proper CSS-to-PPTX attribute mapping, robust CLI flag parsing (-o/-p), auto port selection, 30s timeout guard, and graceful cleanup. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-22 18:46:35 +08:00
parent d2bc6b3623
commit dc1320aada
1 changed files with 259 additions and 133 deletions
@@ -2,13 +2,15 @@
 /**
 * html2pptx — HTML to editable PPTX export engine
 *
- * 用法: node bin/html2pptx.js <input.html> <output.pptx>
+ * Usage:
+ *   html2pptx <input.html> [output.pptx]
+ *   html2pptx <input.html> -o <output.pptx> -p <port>
 *
- * 流程:
- * 1. 启动本地 HTTP 服务托管 HTML
- * 2. Chrome headless 打开页面
- * 3. 遍历 DOM 提取每页元素的位置/文字/样式
- * 4. pptxgenjs 生成 PPTX 文件
+ * Process:
+ *   1. Start local HTTP server to host the HTML
+ *   2. Chrome headless (Playwright) opens the page
+ *   3. Extract each slide's element positions, text, and styles
+ *   4. Generate PPTX with pptxgenjs
 */

 const { chromium } = require('playwright');
@@ -16,31 +18,110 @@ const http = require('http');
 const fs = require('fs');
 const path = require('path');
 const PptxGenJS = require('pptxgenjs');
-const { execSync } = require('child_process');

-const PORT = 8192;
+// ====== CLI argument parsing ======

-// ====== CLI 参数解析 ======
+function parseArgs() {
  const args = process.argv.slice(2);
-if (args.length < 2) {
-  console.error('用法: node bin/html2pptx.js <input.html> <output.pptx>');
+  if (args.length === 0) {
+    console.error('Usage: html2pptx <input.html> [output.pptx]');
+    console.error('       html2pptx <input.html> -o <output.pptx> -p <port>');
    process.exit(1);
  }
-const inputPath = path.resolve(args[0]);
-const outputPath = path.resolve(args[1]);

-if (!fs.existsSync(inputPath)) {
-  console.error(`文件不存在: ${inputPath}`);
-  process.exit(1);
+  const inputPath = path.resolve(args[0]);
+  const parsed = path.parse(inputPath);
+  let outputPath = path.join(parsed.dir, parsed.name + '.pptx');
+  let port;
+
+  for (let i = 1; i < args.length; i++) {
+    if (args[i] === '-o' && i + 1 < args.length) {
+      outputPath = path.resolve(args[++i]);
+    } else if (args[i] === '-p' && i + 1 < args.length) {
+      port = parseInt(args[++i], 10);
+    } else if (!args[i].startsWith('-')) {
+      outputPath = path.resolve(args[i]);
    }
+  }
+
+  return { inputPath, outputPath, port };
+}
+
+// ====== Color parsing (Node.js side) ======
+
+function parseCSSColor(color, fallback) {
+  if (!color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)') return fallback || '#000000';
+
+  // Already #rrggbb
+  if (/^#[0-9a-f]{6}$/i.test(color)) return color.toLowerCase();
+  // #rgb → #rrggbb
+  if (/^#[0-9a-f]{3}$/i.test(color)) {
+    return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+  }
+
+  // rgb(r, g, b) / rgba(r, g, b, a)
+  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (m) {
+    return '#' + m.slice(1, 4).map(c => parseInt(c).toString(16).padStart(2, '0')).join('');
+  }
+
+  return fallback || '#000000';
+}
+
+function parseFontWeight(w) {
+  if (w === 'bold') return true;
+  const n = parseInt(w, 10);
+  return n >= 600;
+}
+
+function normalizeAlign(align) {
+  switch (align) {
+    case 'left': case 'center': case 'right': case 'justify': return align;
+    case 'start': return 'left';
+    case 'end': return 'right';
+    default: return 'left';
+  }
+}
+
+// ====== Main ======

 async function main() {
-const server = http.createServer((req, res) => {
-  const filePath = path.join(path.dirname(inputPath), req.url === '/' ? path.basename(inputPath) : req.url);
-  if (fs.existsSync(filePath)) {
-    const ext = path.extname(filePath);
-    const mime = { '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript', '.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml' };
-    res.writeHead(200, { 'Content-Type': mime[ext] || 'text/plain' });
+  const { inputPath, outputPath, port: cliPort } = parseArgs();
+
+  if (!fs.existsSync(inputPath)) {
+    console.error('文件不存在:', inputPath);
+    process.exit(1);
+  }
+
+  const TIMEOUT_MS = 30000;
+  const startTime = Date.now();
+  let server, browser;
+
+  try {
+    // ------ 1. HTTP server ------
+    const baseDir = path.dirname(inputPath);
+    const MIME = {
+      '.html': 'text/html; charset=utf-8',
+      '.css': 'text/css; charset=utf-8',
+      '.js': 'application/javascript; charset=utf-8',
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.svg': 'image/svg+xml',
+    };
+
+    server = http.createServer((req, res) => {
+      const reqPath = req.url === '/' ? '/' + path.basename(inputPath) : req.url;
+      const filePath = path.join(baseDir, reqPath);
+      // Prevent directory traversal
+      if (!filePath.startsWith(baseDir)) {
+        res.writeHead(404);
+        res.end('Not Found');
+        return;
+      }
+      if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+        const ext = path.extname(filePath).toLowerCase();
+        res.writeHead(200, { 'Content-Type': MIME[ext] || 'application/octet-stream' });
        res.end(fs.readFileSync(filePath));
      } else {
        res.writeHead(404);
@@ -48,141 +129,186 @@ const server = http.createServer((req, res) => {
      }
    });

-await new Promise(resolve => server.listen(PORT, '127.0.0.1', resolve));
-console.log(`HTTP 服务已启动: http://127.0.0.1:${PORT}/`);
+    const port = cliPort || 0;
+    await new Promise((resolve, reject) => {
+      server.listen(port, '127.0.0.1', resolve);
+      server.on('error', reject);
+    });
+    const actualPort = server.address().port;
+    console.log('HTTP 服务已启动: http://127.0.0.1:' + actualPort + '/');

-// ====== 2. Chrome headless 打开页面 ======
-const browser = await chromium.launch({ headless: true, channel: 'chrome' });
+    if (Date.now() - startTime > TIMEOUT_MS) throw new Error('导出超时');
+
+    // ------ 2. Chrome headless ------
+    browser = await chromium.launch({ headless: true });
    const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });

-try {
-  await page.goto(`http://127.0.0.1:${PORT}/`, { waitUntil: 'networkidle' });
+    if (Date.now() - startTime > TIMEOUT_MS) throw new Error('导出超时');
+
+    await page.goto('http://127.0.0.1:' + actualPort + '/', {
+      waitUntil: 'networkidle',
+      timeout: 15000,
+    });
    console.log('页面加载完成');

-  // ====== 3. 提取每页的 DOM 信息 ======
+    // ------ 3. DOM extraction (in-browser) ------
    const slidesData = await page.evaluate(() => {
-    // 找 slide 容器：<section> 或 [data-slide] 或直接 .slide
-    let slides = document.querySelectorAll('section[data-slide], .slide, section');
-    if (slides.length === 0) {
-      // 如果是横向翻页，可能在一页里
-      slides = [document.body];
+      // ----- Slide detection -----
+      let slides = document.querySelectorAll(
+        'section[data-slide], section.slide, section'
+      );
+      if (slides.length <= 1) {
+        slides = document.querySelectorAll('[data-slide]');
+      }
+      slides = Array.from(slides).filter(function (s) {
+        var r = s.getBoundingClientRect();
+        return r.width > 0 && r.height > 0;
+      });
+
+      // Tags that are purely structural containers — skip when they have no direct text
+      var CONTAINER_TAGS = new Set([
+        'div', 'section', 'ul', 'ol', 'nav', 'header', 'footer',
+        'main', 'aside', 'article', 'form', 'fieldset', 'table',
+        'thead', 'tbody', 'tfoot', 'tr', 'figure',
+      ]);
+
+      function hasDirectText(el) {
+        var nodes = el.childNodes;
+        for (var i = 0; i < nodes.length; i++) {
+          if (nodes[i].nodeType === 3 && nodes[i].textContent.trim()) return true;
+        }
+        return false;
      }

-    return Array.from(slides).map(slide => {
-      const rect = slide.getBoundingClientRect();
-      // 隐藏不可见的 slide
-      if (rect.width === 0 || rect.height === 0) return null;
+      return slides.map(function (slide) {
+        var slideRect = slide.getBoundingClientRect();
+        var allEls = slide.querySelectorAll('*');
+        var elements = [];

-      const elements = [];
-      const walker = document.createTreeWalker(slide, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, null, false);
-
-      let node;
-      while (node = walker.nextNode()) {
-        if (node.nodeType === Node.TEXT_NODE) {
-          const text = node.textContent.trim();
+        for (var i = 0; i < allEls.length; i++) {
+          var el = allEls[i];
+          var text = (el.textContent || '').trim();
          if (!text) continue;
-          const range = document.createRange();
-          range.selectNodeContents(node);
-          const textRect = range.getBoundingClientRect();
-          if (textRect.width === 0 || textRect.height === 0) continue;

-          const parent = node.parentElement;
-          const style = parent ? window.getComputedStyle(parent) : null;
+          var rect = el.getBoundingClientRect();
+          if (rect.width === 0 || rect.height === 0) continue;
+
+          var tag = el.tagName.toLowerCase();
+          var directText = hasDirectText(el);
+
+          // Skip structural containers that have no direct text (e.g. wrapper divs)
+          if (CONTAINER_TAGS.has(tag) && !directText) continue;
+
+          var style = window.getComputedStyle(el);

          elements.push({
-            type: 'text',
-            text: text,
-            x: textRect.left - rect.left,
-            y: textRect.top - rect.top,
-            width: textRect.width,
-            height: textRect.height,
-            fontSize: style ? parseFloat(style.fontSize) : 14,
-            fontFamily: style ? style.fontFamily : 'Arial',
-            color: style ? style.color : '#000000',
-            fontWeight: style ? style.fontWeight : 'normal',
-            textAlign: style ? style.textAlign : 'left',
-            bold: style ? (parseInt(style.fontWeight) >= 700 || style.fontWeight === 'bold') : false
-          });
-        }
-      }
-
-      // 获取 slide 背景色
-      const bg = window.getComputedStyle(slide).backgroundColor;
-      const bgColor = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent' ? bg : '#FFFFFF';
-
-      return {
+            text: text.substring(0, 2000),
+            x: rect.left - slideRect.left,
+            y: rect.top - slideRect.top,
            width: rect.width,
            height: rect.height,
-        bgColor: bgColor,
-        elements: elements
-      };
-    }).filter(Boolean);
+            fontSize: parseFloat(style.fontSize) || 14,
+            fontFamily: style.fontFamily || 'Arial',
+            color: style.color || '#000000',
+            fontWeight: style.fontWeight || 'normal',
+            fontStyle: style.fontStyle || 'normal',
+            textAlign: style.textAlign || 'left',
+            backgroundColor: style.backgroundColor || 'transparent',
          });
-
-  console.log(`提取到 ${slidesData.length} 页幻灯片`);
-
-  // ====== 4. pptxgenjs 生成 PPTX ======
-  const pptx = new PptxGenJS();
-  pptx.defineLayout({ name: 'CUSTOM', width: 10, height: 5.625 }); // 16:9
-  pptx.layout = 'CUSTOM';
-
-  for (const slideData of slidesData) {
-    const slide = pptx.addSlide();
-    
-    // 背景色
-    slide.background = { fill: slideData.bgColor };
-
-    // 按 y 排序，从上到下
-    slideData.elements.sort((a, b) => a.y - b.y || a.x - b.x);
-
-    for (const el of slideData.elements) {
-      if (el.type === 'text' && el.text.trim()) {
-        // 缩放比例：HTML 像素 → PPT 英寸
-        const scaleX = 10 / slideData.width;
-        const scaleY = 5.625 / slideData.height;
-
-        const x = el.x * scaleX;
-        const y = el.y * scaleY;
-        const w = Math.max(el.width * scaleX, 0.5);
-        const h = Math.max(el.height * scaleY, 0.3);
-
-        // 颜色格式转换: rgb(r,g,b) → hex
-        let color = el.color;
-        if (color.startsWith('rgb')) {
-          const m = color.match(/\d+/g);
-          if (m) color = '#' + m.slice(0, 3).map(c => parseInt(c).toString(16).padStart(2, '0')).join('');
        }

+        // Slide background
+        var bg = window.getComputedStyle(slide).backgroundColor;
+        var bgColor =
+          bg &&
+          bg !== 'rgba(0, 0, 0, 0)' &&
+          bg !== 'transparent'
+            ? bg
+            : '#FFFFFF';
+
+        return {
+          width: slideRect.width,
+          height: slideRect.height,
+          bgColor: bgColor,
+          elements: elements,
+        };
+      });
+    });
+
+    console.log('提取到 ' + slidesData.length + ' 页幻灯片');
+
+    if (Date.now() - startTime > TIMEOUT_MS) throw new Error('导出超时');
+
+    // ------ 4. PPTX generation ------
+    var pptx = new PptxGenJS();
+    pptx.defineLayout({ name: 'CUSTOM', width: 10, height: 5.625 });
+    pptx.layout = 'CUSTOM';
+
+    for (var s = 0; s < slidesData.length; s++) {
+      var slideData = slidesData[s];
+      var slide = pptx.addSlide();
+
+      // Background
+      slide.background = { fill: parseCSSColor(slideData.bgColor, '#FFFFFF') };
+
+      // Scale factors: HTML pixels → PPT inches
+      var scaleX = 10 / slideData.width;
+      var scaleY = 5.625 / slideData.height;
+
+      // Sort top-to-bottom, left-to-right
+      slideData.elements.sort(function (a, b) {
+        return a.y - b.y || a.x - b.x;
+      });
+
+      for (var e = 0; e < slideData.elements.length; e++) {
+        var el = slideData.elements[e];
+        var t = (el.text || '').trim();
+        if (!t) continue;
+
        try {
-          slide.addText(el.text, {
+          var x = Math.max(el.x * scaleX, 0);
+          var y = Math.max(el.y * scaleY, 0);
+          var w = Math.max(el.width * scaleX, 0.3);
+          var h = Math.max(el.height * scaleY, 0.2);
+
+          // Font size: proportional to slide height
+          // CSS px → inches at 96dpi → scaled to PPTX slide height → pt (/72 inches per pt)
+          var fontSize = el.fontSize * scaleY * 72;
+          fontSize = Math.max(fontSize, 8);
+
+          slide.addText(t, {
            x: x,
            y: y,
            w: w,
            h: h,
-            fontSize: Math.max(el.fontSize * scaleY, 8),
-            fontFace: el.fontFamily ? el.fontFamily.split(',')[0].trim().replace(/['"]/g, '') : 'Arial',
-            color: color,
-            bold: el.bold,
-            align: el.textAlign || 'left',
+            fontSize: fontSize,
+            fontFace: (el.fontFamily || 'Arial').split(',')[0].trim().replace(/['"]/g, ''),
+            color: parseCSSColor(el.color, '#000000'),
+            bold: parseFontWeight(el.fontWeight),
+            italic: el.fontStyle === 'italic' || el.fontStyle === 'oblique',
+            align: normalizeAlign(el.textAlign),
            valign: 'top',
            wrap: true,
-            margin: 0
+            margin: 0,
          });
-        } catch (e) {
-          // 跳过单个元素失败
-        }
+        } catch (err) {
+          // Skip individual element failure
        }
      }
    }

    await pptx.writeFile({ fileName: outputPath });
-  console.log(`\nPPTX 已导出: ${outputPath}`);
+    console.log('\nPPTX 已导出: ' + outputPath);
+  } finally {
+    if (browser) await browser.close().catch(function () {});
+    if (server)
+      await new Promise(function (resolve) {
+        server.close(resolve);
+      });
+  }
+}

-} catch (err) {
+main().catch(function (err) {
  console.error('导出失败:', err.message);
  process.exit(1);
-} finally {
-  await browser.close();
-  server.close();
-}
-main().catch(err => { console.error('导出失败:', err.message); process.exit(1); });
+});