纯浏览器渲染 PPT

就在这个页面里跑

下面这个查看器用的就是 npm 上的 @web-ppt/core。拖一个自己的文件进来——它不会被上传到任何地方。

解析与渲染全部发生在你的设备上，没有任何网络请求把文件送出去。

能力矩阵

两种格式各自走完全独立的解析链路，渲染层共用同一份 Schema。

上手

import { parse, renderSlideToSvg } from '@web-ppt/core';

const pres = await parse(file);   // File | Blob | ArrayBuffer
el.innerHTML = renderSlideToSvg(pres, pres.slides[0]);

import { Viewer } from '@web-ppt/viewer-core';

const v = new Viewer(box, pres, { animate: true });
v.next();          // 先播动画，播完才翻页
v.setZoom(1.5);
await v.exportPng(2);

import { PresentationState } from '@web-ppt/viewer-core';

// 无 DOM 的状态机，React / Vue 直接驱动
const st = new PresentationState(pres);
st.subscribe(setState);
st.next(); st.search('关键词');

import { parseInWorker } from '@web-ppt/core';

const w = new Worker(
  new URL('@web-ppt/core/worker', import.meta.url),
  { type: 'module' });
const pres = await parseInWorker(w, buf);

await slideToPng(pres, slide, 2);        // → Blob
await slideToSvgFile(pres, slide);       // → string
await presentationToPrintableHtml(pres); // 浏览器打印即 PDF

// 图表解析器与图元文件解码器都经 hook 注入
setChartParser(myChartParser);
setMetafileDecoder(undefined);  // 省 ~15KB gzip

架构

解析层与渲染层完全解耦——渲染层只认 Schema，不认文件格式。

保真 & 性能

疑难杂症

下面每一格都是实际踩过的坑，不是编出来的教学例子。左边是天真做法的结果，右边是本引擎实时渲染的同一份 .pptx。

语料来自 Apache POI 的 242 个公开测试文件。排除 22 个故意损坏的模糊测试样本后，真实文件成功率 210/220；余下 10 个是截断文件、空文件、PowerPoint 95/4.0 与未知口令的加密文件。

包

想接 React / Vue / Svelte，直接驱动 PresentationState，不需要等官方封装。