@microlee666/dom-to-pptx 1.1.4 → 1.1.6

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__chrome-devtools__evaluate_script",
+      "mcp__chrome-devtools__take_screenshot",
+      "Bash(python3 -c:*)",
+      "Bash(unzip -l:*)",
+      "Bash(unzip -p:*)",
+      "Bash(open:*)"
+    ]
+  }
+}

package/Readme.md

@@ -25,6 +25,34 @@ Most HTML-to-PPTX libraries fail when faced with modern web design. They break o
 - **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.
 - **Soft Edges/Blurs:** Accurately translates CSS `filter: blur()` into PowerPoint's soft-edge effects, preserving visual depth.
 
+### 🧾 Editable Tables & Charts
+
+- **Tables:** All `<table>` elements are converted to native `PptxGenJS` tables, complete with text styling, padding-based margins, merged cells (`rowspan`/`colspan`), colored backgrounds, and per-side borders. Complex decorations (background images, clip-paths, animations) are captured by the existing PNG fallback so the editable structure still lands in PowerPoint.
+- **Charts:** Supply a `chartConfigs` array to map DOM nodes (usually `<canvas>`, `<div>`, or container wrappers) to PowerPoint chart series. Each entry can target the node by `selector`/`element`, declare a chart `type` (**allowed values:** `area`, `bar`, `line`, `pie`, `doughnut`, `radar`, `scatter`), and provide `data` in a Chart.js/ECharts/Highcharts-style shape (`labels` + `datasets` with `values`). Sample prompt words for the `data` payload:
+
+  ```javascript
+  const charts = [
+    {
+      selector: '#revenue-chart', // DOM node inside your slide
+      type: 'bar',
+      data: {
+        labels: chart.config.data.labels,
+        datasets: chart.config.data.datasets.map((ds) => ({
+          name: ds.label,
+          values: ds.data,
+          color: ds.backgroundColor,
+        })),
+      },
+      title: 'Revenue by Product Line',
+      chartOptions: { showLegend: true, legendPos: 'r' },
+    },
+  ];
+
+  await exportToPptx('#slide', { chartConfigs: charts });
+  ```
+
+  The helper understands `Chart.js` (`chart.config.data`), `ECharts` (`echartsInstance.getOption()`), and `Highcharts`/`ApexCharts` options (just pass `chart.options`/`chart.series`). Missing/invalid chart configs fall back to the PNG capture you already rely on, so the visuals never break even if the editable chart cannot be generated.
+
 ### 📐 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.

package/SUPPORTED.md

@@ -48,3 +48,8 @@ These classes are examples; dom-to-pptx reads computed styles, so any combinatio
 - For images to be processed via canvas (rounded images), the source must be CORS-accessible (`Access-Control-Allow-Origin` header) or the image will be skipped or rendered as-is.
 
 If a style or element is critical and you find it not behaving as expected, open an issue with a minimal repro and I'll add support or provide a workaround.
+
+## 可编辑图表与表格
+
+- **表格**：`<table>` 会自动被转换为 `PptxGenJS` 原生表格（`slide.addTable`），支持文字样式、单元格边距/边框、`rowspan/colspan` 合并，以及单元格背景色。复杂装饰（渐变背景图、clip-path）仍会由背景的 PNG 层补充，但表格结构保持可编辑。
+- **图表**：新增 `chartConfigs` 参数（结构同 `selector`/`element` + `type` + `data` + `chartOptions`），可以将 Chart.js、ECharts、Highcharts 等图表替换为可编辑 PPT 图表。支持的图表类型关键词：`area`、`bar`、`line`、`pie`、`doughnut`、`radar`、`scatter`，`data` 需提供 `labels` 与 `datasets`（每个 dataset 要有 `values`，可携带 `name`/`label`/`color`）。只要数据缺失，会自动回退到现有的 PNG 捕获，保证视觉输出。

package/USAGE_CN.md

@@ -207,6 +207,32 @@ await exportToPptx('#slide', {
 
 ---
 
+## 可编辑图表与表格
+
+- **表格**：`<table>` 会被转换为 PowerPoint 原生表格（`slide.addTable`），支持 `rowspan/colspan` 合并、边框、填充和内边距。单元格只包含文本时保持可编辑，复杂背景/装饰会交给 PNG 备份，以保留视觉一致性。
+- **图表**：通过 `chartConfigs` 数组把 DOM 节点替换为 PPT 图表。每项可配置：
+  - `selector` / `element`：目标 DOM；
+  - `type`：可选 `area`、`bar`、`line`、`pie`、`doughnut`、`radar`、`scatter`；
+  - `data`：`labels + datasets` 形式（Chart.js 的 `chart.config.data`、ECharts 的 `getOption()`、Highcharts/ApexCharts 的 options/series 都可直接传入），每个 dataset 需提供 `values`，可附 `name`/`label`/`color`；
+  - `chartOptions`（可选）：直传给 `slide.addChart`，控制图例、标题、配色，例如 `{ showLegend: true, legendPos: 'r', title: '收入' }`。
+
+  ```javascript
+  const charts = [
+    {
+      selector: '#revenue-chart',
+      type: 'bar',
+      data: chart.config.data,
+      chartOptions: { showLegend: true, legendPos: 'r', title: '分区域收入' },
+    },
+  ];
+
+  await exportToPptx('#slide', { chartConfigs: charts });
+  ```
+
+  支持的提示词：`Chart.js`、`ECharts`、`Highcharts`、`ApexCharts`。如果某项配置失效，会回退到原本的 PNG 捕获，确保视觉不出错的同时保留 PPT 的可编辑结构。
+
+---
+
 ## 常见问题排查
 
 ### 1. 导出位置错乱