# @diceui/pptx 中文文档

规范地址：https://npmcn.com/package/%40diceui/pptx/

版本：0\.4\.0
npm 元数据更新时间：2026-11-06T01:44:00.491Z
中文译文更新时间：2026-11-12T06:51:48.198Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40diceui/pptx
原文对照：https://npmcn.com/package/%40diceui/pptx/?lang=original
项目主页：https://pptx.diceui.com/
源码仓库：https://github.com/sadmann7/pptx

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

- 包体积（解压后）：288 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@types/react \*，@types/react-dom \*
- 首次发布：2026-09-01T10:05:03.936Z
- 最新版本发布：2026-11-06T01:44:00.185Z
- 近 30 天下载量：99307（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

用于浏览和编辑浏览器中的PowerPoint演示文稿的可编译原始.

## 安装

```sh
npm install @diceui/pptx
```

也可以使用：`pnpm add @diceui/pptx`、`yarn add @diceui/pptx`、`bun add @diceui/pptx`

## README

# @diceui/pptx (英语)

用于浏览和编辑浏览器中的PowerPoint演示文稿的可编译原始.

## 文档

访问 [pptx.diceui.com (中文(简体) )](https://pptx.diceui.com/) 查看文件全文.

## 安装

```bash
npm install @diceui/pptx
```

## 查看器

```tsx
import { Presentation } from "@diceui/pptx";

export function Viewer({ file }: { file: File }) {
  return (
    <Presentation.Root file={file}>
      <Presentation.Viewport>
        <Presentation.Slide />
      </Presentation.Viewport>
    </Presentation.Root>
  );
}
```

## 编辑器

装入 `readOnly={false}` 添加 `Selection` 内部 `Slide` 以允许拖放移动、调整大小、旋转、抓取、内置文本编辑、多选择、marquee选择、复制和粘贴以及键盘快捷键(按住、删除、复制、安排和选入取消/重做):

```tsx
import { Presentation } from "@diceui/pptx";

export function Editor({ file }: { file: File }) {
  return (
    <Presentation.Root file={file} readOnly={false}>
      <Presentation.Viewport>
        <Presentation.Slide>
          <Presentation.Selection />
        </Presentation.Slide>
      </Presentation.Viewport>
    </Presentation.Root>
  );
}
```

## 构成部分

| 构成部分 | 说明 |
| --- | --- |
| `Presentation.Provider` | 在不渲染DOM的情况下为后代提供商店 |
| `Presentation.Root` | 装入文件并创建存储或继承一个 `Provider` |
| `Presentation.Viewport` | 缩放活动幻灯片以适应的可滚动画布 |
| `Presentation.Slide` | 渲染活动幻灯片 |
| `Presentation.Selection` | 编辑覆盖( 移动、 调整大小、 旋转、 文本、 撤销/ 重做) |
| `Presentation.SelectionBox` | 每个选定形状的大纲, 握有控点 |
| `Presentation.ResizeHandle` | 更改选定形状的手柄大小 |
| `Presentation.RotateHandle` | 选定形状的旋转控件 |
| `Presentation.SnapGuide` | 在移动或调整坐标时显示导线 |
| `Presentation.Marquee` | 橡胶带,用于选择和绘制工具 |
| `Presentation.ThumbnailList` | 幻灯片缩略图可滚动列表 |
| `Presentation.Loading` | 自定义加载状态槽 |
| `Presentation.Error` | 自定义错误的槽状态 |

所有组成部分都支持a `render` 用于替换基本元素的道具.

## 钩子

这些是从最近的 `Root` 或者说 `Provider`数字 :

```ts
const { presentation, status } = usePresentation();
const { slide, index, next, prev } = useSlide();
const { zoom, setZoom } = useZoom();
const { canUndo, canRedo, isDirty, undo, redo } = useHistory();
const { textStyle, setTextStyle, insertShape, startDrawing } = useSelection();
```

`useSelection` 在幻灯片外驱动格式化工具栏。 标记工具栏 `data-pptx-keep-selection` 因此,它保持选择.

### 无控制

`Root` 创建商店。 需要的时候从后人那里得到 `load`, (中文(简体) ), `edit`, (中文(简体) ), `undo`,或 `save`数字 :

```ts
const store = usePresentationStore();
const slideIndex = useSlideIndex(store, slideId);
const revision = useSlideRevision(store, slideId);
```

### 已控制

手动创建商店并传递给 `Provider`数字 :

```ts
const store = useCreatePresentationStore();
await store.load(buffer);
await store.edit({ type: "setSolidFill", slideId, nodeId, color: "FF0000" });
const bytes = await store.save();
```

## 他们

选择覆盖从 CSS 变量读取其颜色 :

| 变量 | 默认 |
| --- | --- |
| `--presentation-selection` | `#1a73e8` |
| `--presentation-snap-guide` | `#f43f5e` |
| `--presentation-snap-guide-width` | `1px` |
| `--presentation-rotate-handle-offset` | `20px` |
| `--presentation-rotate-cursor` | `crosshair` |

```css
:root {
  --presentation-selection: #7c3aed;
}
```

## 许可证

阿帕奇2.0 (英语). 见 [通知](https://github.com/sadmann7/pptx/blob/main/NOTICE) 对第三方的归属.

## 常见问题

### @diceui/pptx 是什么？

用于浏览和编辑浏览器中的PowerPoint演示文稿的可编译原始\.

### 如何安装 @diceui/pptx？

在项目目录运行 npm install @diceui/pptx，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @diceui/pptx 支持 TypeScript 吗？

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

### @diceui/pptx 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @diceui/pptx 可以商用吗？

@diceui/pptx 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @diceui/pptx 的下载量有多少？

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

### @diceui/pptx 还在维护吗？

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