pptx-glimpse 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -99
- package/dist/index.cjs +2304 -371
- package/dist/index.d.cts +23 -1
- package/dist/index.d.ts +23 -1
- package/dist/index.js +2301 -370
- package/package.json +22 -12
package/README.md
CHANGED
|
@@ -1,14 +1,36 @@
|
|
|
1
1
|
# pptx-glimpse
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/pptx-glimpse)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A TypeScript library to render PPTX slides as SVG / PNG.
|
|
6
|
+
|
|
7
|
+
[Demo](https://hirokisakabe.github.io/pptx-glimpse/) | [npm](https://www.npmjs.com/package/pptx-glimpse)
|
|
8
|
+
|
|
9
|
+
## Motivation
|
|
10
|
+
|
|
11
|
+
pptx-glimpse is designed for two primary use cases:
|
|
12
|
+
|
|
13
|
+
- **Frontend PPTX preview** — Render slide thumbnails without depending on
|
|
14
|
+
Microsoft Office or LibreOffice. The SVG output can be embedded directly
|
|
15
|
+
in web pages.
|
|
16
|
+
- **AI image recognition** — Convert slides to PNG so that vision-capable LLMs
|
|
17
|
+
can understand slide content and layout.
|
|
18
|
+
|
|
19
|
+
The library focuses on accurately reproducing text, shapes, and spatial layout
|
|
20
|
+
rather than pixel-perfect rendering of every PowerPoint feature.
|
|
21
|
+
|
|
22
|
+
## Requirements
|
|
23
|
+
|
|
24
|
+
- **Node.js >= 20** (does not work in browser environments)
|
|
25
|
+
- Requires a platform supported by [sharp](https://sharp.pixelplumbing.com/), which is used for PNG conversion
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
6
28
|
|
|
7
29
|
```bash
|
|
8
30
|
npm install pptx-glimpse
|
|
9
31
|
```
|
|
10
32
|
|
|
11
|
-
##
|
|
33
|
+
## Usage
|
|
12
34
|
|
|
13
35
|
```typescript
|
|
14
36
|
import { readFileSync } from "fs";
|
|
@@ -16,138 +38,149 @@ import { convertPptxToSvg, convertPptxToPng } from "pptx-glimpse";
|
|
|
16
38
|
|
|
17
39
|
const pptx = readFileSync("presentation.pptx");
|
|
18
40
|
|
|
19
|
-
// SVG
|
|
41
|
+
// Convert to SVG
|
|
20
42
|
const svgResults = await convertPptxToSvg(pptx);
|
|
21
43
|
// [{ slideNumber: 1, svg: "<svg>...</svg>" }, ...]
|
|
22
44
|
|
|
23
|
-
// PNG
|
|
45
|
+
// Convert to PNG
|
|
24
46
|
const pngResults = await convertPptxToPng(pptx);
|
|
25
47
|
// [{ slideNumber: 1, png: Buffer, width: 960, height: 540 }, ...]
|
|
26
48
|
```
|
|
27
49
|
|
|
28
|
-
##
|
|
50
|
+
## Feature Support
|
|
51
|
+
|
|
52
|
+
Supports conversion of static visual content in PowerPoint. Dynamic elements such as animations and transitions are not supported.
|
|
53
|
+
|
|
54
|
+
### Supported Features
|
|
55
|
+
|
|
56
|
+
#### Shapes
|
|
57
|
+
|
|
58
|
+
| Feature | Details |
|
|
59
|
+
| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
60
|
+
| Preset shapes | 136 types (rectangles, ellipses, arrows, flowcharts, callouts, stars, math symbols, etc.) |
|
|
61
|
+
| Custom shapes | Arbitrary shape drawing using custom paths (moveTo, lnTo, cubicBezTo, quadBezTo, arcTo, close), adjust values / guide formulas |
|
|
62
|
+
| Connectors | Straight / bent / curved connectors, arrow endpoints (headEnd/tailEnd), line style / color / width |
|
|
63
|
+
| Groups | Shape grouping, nested groups, group rotation / flip |
|
|
64
|
+
| Transforms | Position, size, rotation, flip (flipH/flipV), adjustment values |
|
|
65
|
+
|
|
66
|
+
#### Text
|
|
67
|
+
|
|
68
|
+
| Feature | Details |
|
|
69
|
+
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
70
|
+
| Character formatting | Font size, font family (East Asian font support), bold, italic, underline, strikethrough, font color, superscript / subscript, hyperlinks |
|
|
71
|
+
| Paragraph formatting | Horizontal alignment (left/center/right/justify), vertical anchor (top/center/bottom), line spacing, before/after paragraph spacing, indent |
|
|
72
|
+
| Bullet points | Character bullets (buChar), auto-numbering (buAutoNum, 9 types), bullet font / color / size |
|
|
73
|
+
| Text boxes | Word wrap (square/none), auto-fit (noAutofit/normAutofit/spAutofit), font scaling, margins |
|
|
74
|
+
| Word wrapping | Word wrapping for English, Japanese, and CJK text, wrapping with mixed font sizes |
|
|
75
|
+
| Style inheritance | Full text style inheritance chain (run → paragraph default → body lstStyle → layout → master → txStyles → defaultTextStyle → theme fonts) |
|
|
76
|
+
| Tab stops / fields | Tab stop positions, field codes (slide number, date, etc.) |
|
|
29
77
|
|
|
30
|
-
|
|
78
|
+
#### Fill
|
|
31
79
|
|
|
32
|
-
|
|
80
|
+
| Feature | Details |
|
|
81
|
+
| ------------ | ---------------------------------------------------------------- |
|
|
82
|
+
| Solid color | RGB color specification, transparency |
|
|
83
|
+
| Gradient | Linear gradient, radial gradient, multiple gradient stops, angle |
|
|
84
|
+
| Image fill | PNG/JPEG/GIF, stretch mode, cropping (srcRect) |
|
|
85
|
+
| Pattern fill | Hatching patterns (horizontal, vertical, diagonal, cross, etc.) |
|
|
86
|
+
| Group fill | Inherit fill from parent group |
|
|
87
|
+
| No fill | noFill specification |
|
|
33
88
|
|
|
34
|
-
####
|
|
89
|
+
#### Lines & Borders
|
|
35
90
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
| グループ | 図形のグループ化、ネストされたグループ |
|
|
42
|
-
| 変形 | 位置、サイズ、回転、反転 (flipH/flipV)、調整値 |
|
|
91
|
+
| Feature | Details |
|
|
92
|
+
| ---------- | ----------------------------------------------------------------- |
|
|
93
|
+
| Line style | Line width, solid color, transparency, lineCap, lineJoin |
|
|
94
|
+
| Dash style | solid, dash, dot, dashDot, lgDash, lgDashDot, sysDash, sysDot |
|
|
95
|
+
| Arrows | Head / tail arrow endpoints with type, width, and length settings |
|
|
43
96
|
|
|
44
|
-
####
|
|
97
|
+
#### Colors
|
|
45
98
|
|
|
46
|
-
|
|
|
47
|
-
| ---------------- |
|
|
48
|
-
|
|
|
49
|
-
|
|
|
50
|
-
|
|
|
51
|
-
| テキストボックス | 折り返し (square/none)、自動調整 (noAutofit/normAutofit/spAutofit)、フォントスケール、マージン |
|
|
52
|
-
| 単語折り返し | 英語・日本語・CJK テキストの折り返し、複数フォントサイズ混在時の折り返し |
|
|
99
|
+
| Feature | Details |
|
|
100
|
+
| ---------------- | ------------------------------------------------------------------------ |
|
|
101
|
+
| Color types | RGB (srgbClr), theme color (schemeClr), system color (sysClr) |
|
|
102
|
+
| Theme colors | Color scheme (dk1, lt1, dk2, lt2, accent1-6, hlink, folHlink), color map |
|
|
103
|
+
| Color transforms | Luminance adjustment (lumMod/lumOff), tint, shade, transparency (alpha) |
|
|
53
104
|
|
|
54
|
-
####
|
|
105
|
+
#### Effects
|
|
55
106
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
107
|
+
| Feature | Details |
|
|
108
|
+
| ------------ | ------------------------------------------------------ |
|
|
109
|
+
| Outer shadow | Blur radius, distance, direction, color / transparency |
|
|
110
|
+
| Inner shadow | Blur radius, distance, direction, color / transparency |
|
|
111
|
+
| Glow | Radius, color / transparency |
|
|
112
|
+
| Soft edge | Radius |
|
|
62
113
|
|
|
63
|
-
####
|
|
114
|
+
#### Images
|
|
64
115
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
116
|
+
| Feature | Details |
|
|
117
|
+
| -------------- | ---------------------------------------------------------------------------- |
|
|
118
|
+
| Image elements | PNG/JPEG/GIF, position / size / rotation / flip, cropping (srcRect), effects |
|
|
119
|
+
| Image fill | Image fill for shapes and backgrounds |
|
|
69
120
|
|
|
70
|
-
####
|
|
121
|
+
#### Tables
|
|
71
122
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
| 色変換 | 輝度調整 (lumMod/lumOff)、ティント (tint)、シェード (shade)、透明度 (alpha) |
|
|
123
|
+
| Feature | Details |
|
|
124
|
+
| --------------- | ------------------------------------------------------------------------------- |
|
|
125
|
+
| Table structure | Row and column grid, cell merging (gridSpan/rowSpan), row height / column width |
|
|
126
|
+
| Cell formatting | Text, fill (solid/gradient/image), borders (top/bottom/left/right, styles) |
|
|
77
127
|
|
|
78
|
-
####
|
|
128
|
+
#### Charts
|
|
79
129
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
| 光彩 | 半径、色・透明度 |
|
|
85
|
-
| ぼかし (Soft Edge) | 半径 |
|
|
130
|
+
| Feature | Details |
|
|
131
|
+
| ---------------- | ------------------------------------------------------------------------------------------ |
|
|
132
|
+
| Supported charts | Bar chart (vertical/horizontal), line chart, pie chart, scatter plot |
|
|
133
|
+
| Chart elements | Title, legend (position), series (name/values/categories/color), category axis, value axis |
|
|
86
134
|
|
|
87
|
-
####
|
|
135
|
+
#### SmartArt
|
|
88
136
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
137
|
+
| Feature | Details |
|
|
138
|
+
| ------------------- | ------------------------------------------------------------------------------ |
|
|
139
|
+
| Pre-rendered shapes | Renders SmartArt using PowerPoint's pre-rendered drawing shapes (drawingN.xml) |
|
|
140
|
+
| mc:AlternateContent | Handles AlternateContent fallback mechanism used by SmartArt |
|
|
93
141
|
|
|
94
|
-
####
|
|
142
|
+
#### Background & Slide Settings
|
|
95
143
|
|
|
96
|
-
|
|
|
144
|
+
| Feature | Details |
|
|
97
145
|
| ------------ | ---------------------------------------------------------------------- |
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
| グラフの詳細機能 | データラベル、軸タイトル・目盛り・グリッド線、誤差範囲、トレンドライン |
|
|
124
|
-
| テキスト | 縦書きテキスト、テキスト個別のエフェクト (影・光彩)、テキストのアウトライン、テキストの列 |
|
|
125
|
-
| 表 | 表スタイルのテンプレート適用、対角線枠線 |
|
|
126
|
-
| 図形 | 図形の結合 (Union/Subtract/Intersect/Fragment) |
|
|
127
|
-
| SmartArt | SmartArt 全般 |
|
|
128
|
-
| マルチメディア | 動画・音声の埋め込み |
|
|
129
|
-
| アニメーション | オブジェクトアニメーション、スライドトランジション |
|
|
130
|
-
| リンク | ハイパーリンク |
|
|
131
|
-
| スライド要素 | スライドノート、コメント、ヘッダー・フッター、スライド番号・日付 |
|
|
132
|
-
| 画像フォーマット | EMF/WMF (パースされるがレンダリング未対応) |
|
|
133
|
-
| その他 | マクロ・VBA、セクション、ズームスライド |
|
|
134
|
-
|
|
135
|
-
## テストレンダリング
|
|
136
|
-
|
|
137
|
-
PPTX ファイルを指定して、SVG と PNG の変換結果を確認できます。
|
|
146
|
+
| Background | Solid, gradient, image. Fallback order: slide → layout → master |
|
|
147
|
+
| Slide size | 16:9, 4:3, custom sizes |
|
|
148
|
+
| Theme | Theme color scheme, theme fonts (majorFont/minorFont), theme font refs |
|
|
149
|
+
| showMasterSp | Control visibility of master shapes per slide / layout |
|
|
150
|
+
|
|
151
|
+
### Unsupported Features
|
|
152
|
+
|
|
153
|
+
| Category | Unsupported features |
|
|
154
|
+
| -------------- | ---------------------------------------------------------------------------------------------- |
|
|
155
|
+
| Fill | Path gradient (rect/shape type) |
|
|
156
|
+
| Effects | Reflection, 3D rotation / extrusion, artistic effects |
|
|
157
|
+
| Charts | Area, radar, doughnut, bubble, stock, combo, histogram, box plot, waterfall, treemap, sunburst |
|
|
158
|
+
| Chart details | Data labels, axis titles / tick marks / grid lines, error bars, trendlines |
|
|
159
|
+
| Text | Vertical text, individual text effects (shadow/glow), text outline, text columns |
|
|
160
|
+
| Tables | Table style template application, diagonal borders |
|
|
161
|
+
| Shapes | Shape operations (Union/Subtract/Intersect/Fragment) |
|
|
162
|
+
| Multimedia | Embedded video / audio |
|
|
163
|
+
| Animations | Object animations, slide transitions |
|
|
164
|
+
| Slide elements | Slide notes, comments, headers / footers, slide numbers / dates |
|
|
165
|
+
| Image formats | EMF/WMF (parsed but not rendered) |
|
|
166
|
+
| Other | Macros / VBA, sections, zoom slides |
|
|
167
|
+
|
|
168
|
+
## Test Rendering
|
|
169
|
+
|
|
170
|
+
You can specify a PPTX file to preview SVG and PNG conversion results.
|
|
138
171
|
|
|
139
172
|
```bash
|
|
140
173
|
npm run render -- <pptx-file> [output-dir]
|
|
141
174
|
```
|
|
142
175
|
|
|
143
|
-
- `output-dir`
|
|
176
|
+
- If `output-dir` is omitted, output is saved to `./output`
|
|
144
177
|
|
|
145
178
|
```bash
|
|
146
|
-
#
|
|
179
|
+
# Examples
|
|
147
180
|
npm run render -- presentation.pptx
|
|
148
181
|
npm run render -- presentation.pptx ./my-output
|
|
149
182
|
```
|
|
150
183
|
|
|
151
|
-
##
|
|
184
|
+
## License
|
|
152
185
|
|
|
153
186
|
MIT
|