@ artifact- kit/ pptxgenjs- jsx

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

这个包包包 PptxGenJS 密码 具有LLM友好组件模型:

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

它能生产什么

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

来源 HTML :

生成的 PPTX 预览 :

可编辑的本地PowerPoint对象 :

在 实例/注意/出口者.html它进行DOM测量, SVG原始绘图, LineBetween, (中文(简体) ), CustomGeometry,本地图表输出,验证,和浏览器下载行为.

安装

pnpm add @artifact-kit/pptxgenjs-jsx

基本用途

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

/** @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()。 。 。 .

最小浏览器模式 :

<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 对于一个小浏览器示例和 实例/注意/出口者.html 用于完整计量的第一个 HTML 至 PPTX 示例.

何时使用

需要时使用此软件包 :

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

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

文档布局

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

• 页:1: 加载命令和编码代理的检索提示.
• 文件/记录/快速启动: 默认 LLM 上下文,总是有用的.
• docs/llm/组件选择.md: 组件选择表.
• 文件/参考资料/通用道具:常见的PptxGenJS道具,用于文本,图像,表格,幻灯片和输出.
• 文件/参考资料/形状道具:形状道具和完整的形状名称列表.
• 文件/参考资料/图表道具:图表数据,轴,标签,传奇,和样式道具.
• 文件/参考资料/全上游道具: 完整生成的上游参考.
• 文件/措施-合同:HTML到PPTX工作流程的浏览器 DOM 测量合同.
• 组件驱动。 json: 显示机器可读组件.

构建产出

发展

pnpm install
pnpm docs:generate
pnpm test
pnpm test:attention