# @artifact-kit/pptxgenjs-jsx 中文文档

规范地址：https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/

版本：0\.1\.6
npm 元数据更新时间：2026-04-29T15:44:35.328Z
中文译文更新时间：2026-11-06T21:06:20.884Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40artifact-kit/pptxgenjs-jsx
原文对照：https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/?lang=original
项目主页：https://github.com/artifact-kit/pptxgenjs-jsx#readme
源码仓库：https://github.com/artifact-kit/pptxgenjs-jsx

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.2 MB，77 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-04-29T10:59:25.111Z
- 最新版本发布：2026-04-29T15:44:35.208Z
- 近 30 天下载量：29120（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

PptxGenJS的LLM友好JSX声明层.

## 安装

```sh
npm install @artifact-kit/pptxgenjs-jsx
```

也可以使用：`pnpm add @artifact-kit/pptxgenjs-jsx`、`yarn add @artifact-kit/pptxgenjs-jsx`、`bun add @artifact-kit/pptxgenjs-jsx`

## README

# @ artifact- kit/ pptxgenjs- jsx

将可编辑的PowerPoint甲板写入JSX. 将 HTML 和 SVG 重新创建为本地 `.pptx` 当截图不够好时对象.

这个包包包 [PptxGenJS 密码](https://gitbrent.github.io/PptxGenJS/) 具有LLM友好组件模型:

-   将甲板描述为可读树: `<Deck><Slide><Text /></Slide></Deck>`。 。 。 .
-   使用专用组件用于文本,形状,图像,表格,图表,行,和生PptxGenJS逃出舱门.
-   在写入文件前验证结构 .
-   在浏览器工作流程中,测量真正的DOM节点并将其映射入PowerPoint坐标.
-   导出可编辑的PowerPoint对象,而不是将一个页面平整成一个位图 .

## 它能生产什么

注意的例子就是这个repo中最清楚的证据. 它从1600x900 HTML/Tailwind/SVG 讲座幻灯片开始,测量浏览器中渲染的DOM,然后重建幻灯片作为可编辑的PowerPoint文本,形状,行,箭头,图表对象,和图表部分.

来源 HTML :

![Source HTML slide](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/assets/proof/01-source-html.png)

生成的 PPTX 预览 :

![Generated PPTX preview](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/assets/proof/02-generated-pptx-preview.png)

可编辑的本地PowerPoint对象 :

![Editable native PowerPoint objects](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/assets/proof/03-editable-native-objects.png)

在 [实例/注意/出口者.html](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/examples/attention/exporter.html)它进行DOM测量, SVG原始绘图, `LineBetween`, (中文(简体) ), `CustomGeometry`,本地图表输出,验证,和浏览器下载行为.

## 安装

```bash
pnpm add @artifact-kit/pptxgenjs-jsx
```

## 基本用途

当您已经知道幻灯片结构和坐标时使用 JSX :

```tsx
/** @jsxImportSource @artifact-kit/pptxgenjs-jsx */
import { BarChart, Deck, RoundRect, Slide, Text, renderPptx, validateDeck } from "@artifact-kit/pptxgenjs-jsx";

const deck = (
  <Deck title="Q1 Review" layout={{ name: "WIDE", width: 13.333, height: 7.5 }}>
    <Slide background={{ color: "FFFFFF" }}>
      <RoundRect x={0.7} y={0.6} w={3.8} h={0.6} fill={{ color: "EEF2FF" }} />
      <Text x={0.9} y={0.78} w={3.4} h={0.3} fontSize={18} bold>Q1 Review</Text>
      <BarChart data={[{ name: "Revenue", labels: ["Jan", "Feb", "Mar"], values: [12, 18, 24] }]} x={6.5} y={1} w={5.5} h={3} />
    </Slide>
  </Deck>
);

const issues = validateDeck(deck);
if (issues.some((issue) => issue.level === "error")) throw new Error(JSON.stringify(issues, null, 2));
await renderPptx(deck, { fileName: "q1-review.pptx" });
```

如果你不想JSX变换,请使用 `pptxElement(Component, props, ...children)`。 。 。 .

## HTML 为可编辑的 PPTX

对于本地工具和代理生成的导出者,您可以在浏览器中直接用IIFE架构加上 Babel 独立编写 JSX. 当真实的来源是已渲染的 HTML 页面、仪表板、报告或类似幻灯片的文档时,这样做是有用的.

工作流程如下:

1.  保持源 HTML 干净.
2.  复制到出口页面.
3.  在一个垂直文档中显示每个幻灯片/页面.
4.  添加 `data-ak-slide`, (中文(简体) ), `data-ak-width`, (中文(简体) ), `data-ak-height`, (中文(简体) ), `data-ak-px-per-in`,以及 `data-ak-measure` 标记.
5.  输出时, 呼叫 `measureArtifacts({ document })`。 。 。 .
6.  使用 `readSlideLayout()`, (中文(简体) ), `readPptBox()`,以及 `readFontPt()` 以放置本地 PowerPoint 对象.
7.  运行 `validateDeck()`,则 `renderPptx()`。 。 。 .

最小浏览器模式 :

```html
<script src="https://unpkg.com/@artifact-kit/pptxgenjs-jsx/dist/pptxgenjs-jsx.browser.iife.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-presets="typescript,react">
  /** @jsx pptxElement */
  const {
    Deck,
    Slide,
    Text,
    measureArtifacts,
    pptxElement,
    readFontPt,
    readPptBox,
    readSlideLayout,
    renderPptx,
    validateDeck,
  } = window.ArtifactKitPptxGenJsx;

  document.querySelector("#export-pptx").addEventListener("click", async () => {
    await measureArtifacts({ document });

    const deck = (
      <Deck title="Measured deck" layout={readSlideLayout("slide-1")}>
        <Slide background={{ color: "FFFFFF" }}>
          <Text {...readPptBox("title-1")} fontSize={readFontPt("title-1")} bold margin={0}>
            {document.querySelector('[data-ak-measure="title-1"]').textContent.trim()}
          </Text>
        </Slide>
      </Deck>
    );

    const issues = validateDeck(deck);
    if (issues.some((issue) => issue.level === "error")) throw new Error(JSON.stringify(issues, null, 2));
    await renderPptx(deck, { fileName: "measured-export.pptx" });
  });
</script>
```

见 [实例/浏览器-jsx.html](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/examples/browser-jsx.html) 对于一个小浏览器示例和 [实例/注意/出口者.html](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/examples/attention/exporter.html) 用于完整计量的第一个 HTML 至 PPTX 示例.

## 何时使用

需要时使用此软件包 :

-   从TypeScript,浏览器工具或代理授权代码生成的可编辑的PowerPoint文件.
-   一个声明表层,比命令的紧急呼叫更容易让LLMs写作和审查.
-   原生图表,表格,形状,图像,文本运行,行,和自定义几何.
-   HTML-to-PPTX重建,其中的布局来自真实的浏览器测量.
-   用于编码剂的机器可读文档和组件表.

当一个单一的截图图像是预定的最终文物时,不要使用. 当生成的甲板必须保持可编辑性时,这个包最有价值.

## 文档布局

这种回购是为人类和代理人组织的:

-   [页:1](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/llms.txt): 加载命令和编码代理的检索提示.
-   [文件/记录/快速启动](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/docs/llm/quickstart.md): 默认 LLM 上下文,总是有用的.
-   [docs/llm/组件选择.md](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/docs/llm/component-selection.md): 组件选择表.
-   [文件/参考资料/通用道具](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/docs/reference/common-props.md):常见的PptxGenJS道具,用于文本,图像,表格,幻灯片和输出.
-   [文件/参考资料/形状道具](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/docs/reference/shape-props.md):形状道具和完整的形状名称列表.
-   [文件/参考资料/图表道具](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/docs/reference/chart-props.md):图表数据,轴,标签,传奇,和样式道具.
-   [文件/参考资料/全上游道具](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/docs/reference/all-upstream-props.md): 完整生成的上游参考.
-   [文件/措施-合同](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/docs/measure-contract.md):HTML到PPTX工作流程的浏览器 DOM 测量合同.
-   [组件驱动。 json](https://npmcn.com/package/%40artifact-kit/pptxgenjs-jsx/component-manifest.json): 显示机器可读组件.

## 构建产出

| 产出 | 文件 |
| :-- | :-- |
| 节点无害环境管理 | `dist/pptxgenjs-jsx.es.js` |
| 节点 CJS | `dist/pptxgenjs-jsx.cjs` |
| 浏览器ESM | `dist/pptxgenjs-jsx.browser.es.js` |
| 浏览器IIFE | `dist/pptxgenjs-jsx.browser.iife.js` 全球 `ArtifactKitPptxGenJsx` |

## 发展

```bash
pnpm install
pnpm docs:generate
pnpm test
pnpm test:attention
```

## 常见问题

### @artifact-kit/pptxgenjs-jsx 是什么？

PptxGenJS的LLM友好JSX声明层\.

### 如何安装 @artifact-kit/pptxgenjs-jsx？

在项目目录运行 npm install @artifact-kit/pptxgenjs-jsx，或使用 pnpm add / yarn add / bun add。

### @artifact-kit/pptxgenjs-jsx 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @artifact-kit/pptxgenjs-jsx 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @artifact-kit/pptxgenjs-jsx 可以商用吗？

@artifact-kit/pptxgenjs-jsx 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @artifact-kit/pptxgenjs-jsx 的下载量有多少？

根据 npm 官方下载统计，@artifact-kit/pptxgenjs-jsx 在 2026/10/07 – 2026/11/05 这 30 天内被下载 29,120 次，日均约 971 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @artifact-kit/pptxgenjs-jsx 还在维护吗？

最新版本 0\.1\.6 发布于 2026/04/29（6 个月前）；至今共发布 4 个版本，其中过去 12 个月发布了 4 个；首次发布于 2026/04/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。