Render PPTX files in the browser with JavaScript.

import { PptxViewer } from '@silurus/ooxml/pptx';

// The built-in viewer tracks the current slide for you.
const viewer = new PptxViewer(canvas, { width: 960, useGoogleFonts: true });
await viewer.load('/sample.pptx');

nextBtn.addEventListener('click', () => viewer.nextSlide());
prevBtn.addEventListener('click', () => viewer.prevSlide());

import { PptxPresentation } from '@silurus/ooxml/pptx';

// Headless engine — render every slide into a canvas you control.
const presentation = await PptxPresentation.load('/sample.pptx');

for (let i = 0; i < presentation.slideCount; i++) {
  const canvas = document.createElement('canvas');
  scroller.appendChild(canvas);
  await presentation.renderSlide(canvas, i, { width: 1100 });
}

import { PptxPresentation } from '@silurus/ooxml/pptx';

// Render each slide small, wire up navigation.
const presentation = await PptxPresentation.load('/sample.pptx');

for (let i = 0; i < presentation.slideCount; i++) {
  const thumb = document.createElement('canvas');
  thumb.addEventListener('click', () => open(i));
  grid.appendChild(thumb);
  await presentation.renderSlide(thumb, i, { width: 320 });
}

import { PptxPresentation, PptxViewer } from '@silurus/ooxml/pptx';

// Parse once, then lend the loaded engine to every view that needs it.
const presentation = await PptxPresentation.load('/sample.pptx');

// A large preview on the right borrows the engine and cannot acquire another source.
const viewer = PptxViewer.fromPresentation(detailCanvas, presentation, {
  width: 960,
  enableTextSelection: true,
});
await viewer.goToSlide(0);

// The thumbnail rail on the left renders from that same engine.
for (let i = 0; i < presentation.slideCount; i++) {
  const thumb = document.createElement('canvas');
  thumb.addEventListener('click', () => viewer.goToSlide(i));  // jump the preview
  rail.appendChild(thumb);
  await presentation.renderSlide(thumb, i, { width: 200 });
}

window.addEventListener('pagehide', () => {
  viewer.destroy();
  presentation.destroy(); // borrowed engines remain caller-owned
}, { once: true });