PowerPoint preview
A read-only viewer that shows .pptx presentations the way PowerPoint does. Inheritance from the theme, master and layout, colour arithmetic, table styles, line breaks and line spacing are measured against PowerPoint itself. The file is read in the browser by a dependency-free reader; macros and embedded objects never run and external links are never fetched. Hyperlinks to external targets are drawn as links that open in a new tab (rel="noopener noreferrer"); only http, https, mailto, tel, ftp and sms targets become links, so a javascript: or data: target stays plain text.
It ships as its own entry point of the spreadsheet packages, so an application that only shows workbooks never loads it, and it is covered by the same license.
Getting started
Point source at a presentation. Arrow keys, Page Up, Page Down, Home and End move between slides, and every slide is announced to screen readers.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgePresentation } from '@oge-ui/spreadsheet/powerpoint';
@Component({
selector: 'demo-root',
imports: [OgePresentation],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- One element shows a .pptx file the way PowerPoint does. [source]
takes a URL, the file's bytes or a File; reading happens in the browser,
with no dependency. Arrow keys, Page Up/Down, Home and End move between
slides. -->
<oge-presentation
source="/demo/spreadsheet/slides.pptx"
style="height: 520px"
/>
`,
})
export class Demo {}Controlled slide
[(slideIndex)] keeps the current slide in your own state, and [thumbnails] hides the slide rail.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgePresentation } from '@oge-ui/spreadsheet/powerpoint';
@Component({
selector: 'demo-root',
imports: [OgePresentation],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- [(slideIndex)] keeps the current slide in your own state and
[thumbnails]="false" hides the slide rail. -->
<oge-presentation
source="/demo/spreadsheet/slides.pptx"
[thumbnails]="false"
[(slideIndex)]="slide"
style="height: 420px"
/>
`,
})
export class Demo {
readonly slide = signal(2);
}