PPTX API

PPTX APIs are called through the app returned by widget.render():

const { widget } = await OfficeSdk.openfile({ docId: "demo-pptx", fileName: "demo.pptx", file });
const app = await widget.mount("#office-container").render();

Components#

Quick Example#

app.Document.setZoom(120);
app.Document.goToSlide(2);

app.Paragraph.setFontName("Arial");
app.Paragraph.setBold(true);
app.Paragraph.setAlignment(2);

app.TextBox.setVerticalAlignment(1);
app.Player.play(1);

Event example:

function onSelectionChange(info) {
  console.log(info.selectType);
}

app.Selection.addEventListener("SELECTION_CHANGE", onSelectionChange);

Document#

type SlideLayoutRef = {
  masterIndex: number;
  layoutIndex: number;
};

type SlideLayoutItem = {
  img: unknown;
  name: string;
  xmlName: string;
  id: string | number;
  layoutIndex: number;
  slideMasterIndex: number;
};

goToSlide(slideNum) uses display page numbers starting from 1; deleteSlides(slides) and addSlide(layout, position) use zero-based underlying indexes.

Document example:

const pages = app.Document.getSlideInfo();
console.log(pages.current, pages.total);

app.Document.goToSlide(1);
const layoutGroups = app.Document.getSlideLayouts();
const layout = layoutGroups[0][0];
app.Document.addSlide(
  {
    masterIndex: layout.slideMasterIndex,
    layoutIndex: layout.layoutIndex
  },
  1
);
app.Document.deleteSlides([0]);

await app.Document.exportDocument();

Document component events:

Paragraph#

setAlignment(value) enum:

Paragraph example:

app.Paragraph.setFontName("Microsoft YaHei");
app.Paragraph.setFontColor({ hex: "#4472C4" });
app.Paragraph.setFontSize(18);
app.Paragraph.setBold(true);
app.Paragraph.setItalic(false);
app.Paragraph.setUnderline(true);
app.Paragraph.setStrikeThrough(false);
app.Paragraph.setAlignment(2);
app.Paragraph.increaseFontSize();

PPTX setFontColor(...) currently resolves object colors from hex only. Fields such as type, name, theme, and tint may be carried as palette metadata, but hex cannot be omitted and theme-only objects such as { name, theme } are not supported.

TextBox#

setVerticalAlignment(value) enum:

Example:

app.TextBox.setVerticalAlignment(1);

Player#

fromType:

Example:

app.Player.play(2);
app.Player.enterFullScreen(1);
app.Player.exitFullScreen();

Selection#

Selection example:

if (app.Selection.isTextSelected()) {
  console.log(app.Selection.getFontName());
  console.log(app.Selection.getFontColor());
}

If you pass the getFontColor() return value directly to CSS, normalize alpha to the 0 through 1 range expected by CSS rgba() first.

getAlignment() return values:

getVerticalAlignment() return values:

The implementation keeps an internal "NIL" mapping, but it is not exposed as a stable getVerticalAlignment() return value.

Selection component events:

type PptxSelectionChange = {
  selectType: number;
  bold?: boolean | 0 | null;
  italic?: boolean | 0 | null;
  fontName?: string | null;
  fontSize?: string;
  fontColor?: string;
  underline?: boolean;
  strikeout?: "" | "noStrike" | "sngStrike" | "dblStrike" | null;
  alignHorizontal?: string;
  alignVertical?: "top" | "center" | "bottom" | "default";
  canCopy: boolean;
};

selectType is a bit flag and can be combined with bitwise OR:

Common combined values:

Viewer#

Return values:

UndoRedo#

UndoRedo component events:

Example:

if (app.UndoRedo.canUndo()) {
  app.UndoRedo.undo();
}