快速接入
本页从空的 <div> 开始，逐步实现文件加载、导航和放映模式，得到可用的查看器。
前置条件
请先安装组件包，参见概览 > 安装。
1. 创建完整应用
可以使用 Vite 快速搭建可运行的示例。按以下结构创建目录，并将要打开的 PowerPoint 文件放到 public/presentation.pptx：
my-pptx-app/
index.html
package.json
public/
presentation.pptx
src/
main.js安装组件包和 Vite：
npm init -y
npm install pptx-vanilla-viewer
npm install -D vite将 package.json 中的 scripts 配置为：
{
"scripts": {
"dev": "vite"
}
}运行 npm run dev，打开 Vite 输出的本地地址。Vite 将 public/ 中的文件映射到站点根路径，因此可以通过 /presentation.pptx 访问 public/presentation.pptx。
index.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PPTX Viewer</title>
<style>
html,
body,
#host {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="host"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>src/main.js
import { createPptxViewer, vermilionDarkTheme } from 'pptx-vanilla-viewer';
const host = document.getElementById('host');
createPptxViewer(host, {
// Vite 从 public/presentation.pptx 提供此文件。
source: '/presentation.pptx',
theme: vermilionDarkTheme,
editable: true,
showToolbar: true,
showThumbnails: true,
fileName: 'presentation.pptx',
onLoad: ({ slideCount }) => console.log(`Loaded ${slideCount} slides`),
onError: (message) => console.error(message),
});source 加载成功后，查看器会自动打开演示文稿。无需在 onLoad 中查询或点击查看器内部的文件菜单控件。
如果 .pptx 托管在其他域名下，文件服务器必须通过 CORS 允许当前站点访问。开发时将文件放在 public/ 中即可避免跨域问题。
2. 挂载查看器
createPptxViewer(container, options) 在 container 内构建查看器界面，并返回 PptxViewerInstance。查看器会填满容器，因此请为容器设置明确的尺寸。
<div id="host" style="height: 100vh"></div>import { createPptxViewer } from 'pptx-vanilla-viewer';
const host = document.getElementById('host');
if (!host) throw new Error('Missing #host element');
const viewer = createPptxViewer(host, {
source: '/presentation.pptx',
onLoad: ({ slideCount, canvasSize }) => {
console.log(`${slideCount} slides at ${canvasSize.width}x${canvasSize.height}`);
},
onError: (message) => console.error(message),
});source 接受 URL 字符串（自动获取）、ArrayBuffer、Uint8Array 或 Blob / File。省略时以空状态启动，稍后再加载。
3. 从文件 <input> 加载
<input type="file" id="file" accept=".pptx,.ppt" />
<div id="host" style="height: 80vh"></div>import { createPptxViewer } from 'pptx-vanilla-viewer';
const host = document.getElementById('host');
const fileInput = document.getElementById('file');
if (!host || !(fileInput instanceof HTMLInputElement)) {
throw new Error('Missing #host or #file element');
}
const viewer = createPptxViewer(host, {
onSlideChange: (index) => console.log('slide', index + 1),
});
fileInput.addEventListener('change', async (event) => {
const file = event.currentTarget.files?.[0];
if (file) {
await viewer.loadFile(file); // Blob | ArrayBuffer | Uint8Array
}
});loadFile 和 loadUrl 替换当前演示文稿；每次成功加载都会再次触发 onLoad 回调。
4. 导航、缩放与放映
所有工具栏操作都有对应的实例方法：
viewer.next();
viewer.prev();
viewer.goToSlide(3); // zero-based, clamped
viewer.setZoom(1.5); // explicit scale (1 = 100%)
viewer.zoomToFit(); // fit-to-viewport
viewer.zoomIn();
viewer.zoomOut();
viewer.zoomToFit();
await viewer.enterPresentation(); // real Fullscreen API; Esc exits
await viewer.exitPresentation();完整方法参考请参见查看器实例 API。如果希望隐藏内置界面并自行驱动所有操作，请查看选项与回调中的 showToolbar / showThumbnails。
键盘支持
查看器根元素可以获得焦点（tabindex="0"）。焦点位于查看器上时：
| 按键 | 操作 |
|---|---|
| 方向键、PageUp / PageDown、空格 | 上一张或下一张幻灯片 |
| Home / End | 第一页 / 最后一页 |
| Esc | 退出放映模式 |
样式与所需 CSS
无需导入 CSS。创建第一个查看器时，样式表会作为 <style id="pptx-vanilla-viewer-styles"> 标签注入，每个文档只注入一次，作用域限定在 .pptxv 根类下。创建更多查看器时复用同一个标签。
严格 CSP 宿主：getViewerCss
如果内容安全策略禁止注入样式标签，请导入包中的静态样式表：
import 'pptx-vanilla-viewer/styles.css';也可以自行渲染样式表文本。只要存在带有查看器样式 ID 的节点，就不会再自动注入：
import { getViewerCss } from 'pptx-vanilla-viewer';
// e.g. server-side, or in your build:
const style = document.createElement('style');
style.id = 'pptx-vanilla-viewer-styles';
style.textContent = getViewerCss();
document.head.appendChild(style);所有界面颜色都来自 --pptx-* CSS 自定义属性，覆盖方式请参见主题。
本地化
界面字符串通过共享的 pptx.* 字典解析，内置英文。可以通过 messages 选项传入各语言的覆盖字典，并设置 locale，或稍后调用 setLocale。缺失的键先回退到英文，再回退到易读标签：
const viewer = createPptxViewer(host, {
source,
locale: 'de',
messages: {
de: { 'pptx.presenter.nextSlide': 'Nächste Folie' /* ... */ },
},
});
viewer.setLocale('en'); // rebuilds the chrome labels清理
移除查看器宿主时，请调用 destroy()，清理 DOM、事件监听器、Blob URL 和核心处理器：
viewer.destroy();