@diceui/pptx (英语)

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

文档

访问 pptx.diceui.com (中文(简体) ) 查看文件全文.

安装

npm install @diceui/pptx

查看器

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选择、复制和粘贴以及键盘快捷键(按住、删除、复制、安排和选入取消/重做):

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>
  );
}

构成部分

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

钩子

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

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数字 :

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

已控制

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

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

他们

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

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

许可证

阿帕奇2.0 (英语). 见 通知 对第三方的归属.