# file-online-preview

**Repository Path**: hepingmogul/file-online-preview

## Basic Information

- **Project Name**: file-online-preview
- **Description**: file-online-preview
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-20
- **Last Updated**: 2026-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# file-online-preview

浏览器端 **PPTX 在线预览** 单体仓库（pnpm monorepo）。在 Web Worker 中解析 `.pptx`，再由 Vue 3 组件渲染幻灯片，支持文本、形状、图片、表格、图表、SmartArt、公式等常见元素。

[English](./README.en.md)

## 特性

- **纯前端解析**：基于 JSZip + XML 解析，无需服务端转换
- **Worker 多线程**：`parsePPTXInWorker` 避免大文件阻塞主线程
- **高保真渲染**：填充、边框、阴影、旋转、主题色、字体样式等
- **图表**：柱状 / 折线 / 饼图 / 面积 / 散点 / 雷达等（D3）
- **交互预览**：缩略图侧栏、翻页、缩放、全屏、键盘导航
- **本地调试**：开发环境可从 `public/pptx` 快速切换示例文件

## 软件架构

```text
file-online-preview/
├── apps/
│   └── web-vue/                 # Vue 3 演示应用（Vite + Tailwind + Less）
│       └── src/
│           ├── views/           # 上传 / 拖拽入口页
│           └── components/
│               └── pptx-viewer/ # 幻灯片与图表渲染
├── packages/
│   ├── ppt-parser/              # 二进制 .ppt（97–2003）Rust/WASM 解析引擎
│   ├── pptx/                    # PPTX 解析库（主线程 / Worker）
│   ├── core/                    # 通用核心逻辑
│   └── utils/                   # 工具函数
├── docs/                        # 项目文档与规范
└── tmp/                         # 本地临时文件（默认不入库）
```

**数据流简述：**

1. 用户上传 / 拖入 / 选择 `.pptx`
2. `@file-online-preview/pptx` 在 Worker 中解压并解析幻灯片结构
3. 返回 `PPTXResult`（幻灯片列表、主题色、画布尺寸、字体等）
4. `PPTXViewer` → `PPTXSlide` → `PPTXElementNode` 按元素类型渲染

| 包名 | 说明 |
|------|------|
| `@file-online-preview/ppt-parser` | 二进制 `.ppt` Rust/WASM 解析引擎 |
| `@file-online-preview/pptx` | 解析入口：`parsePPTX` / `parsePPTXInWorker` |
| `@file-online-preview/web-vue` | 在线预览演示站 |
| `@file-online-preview/core` | 核心辅助逻辑 |
| `@file-online-preview/utils` | 通用工具 |

## 环境要求

- Node.js 18+
- [pnpm](https://pnpm.io/) 9+

## 安装与运行

```bash
# 克隆仓库后安装依赖
pnpm install

# 启动演示应用（默认 http://localhost:3000）
pnpm dev

# 构建全部包与应用
pnpm build

# 编译二进制 PPT 的 Rust WASM 并同步到 web-vue vendor（需 Rust + wasm-pack）
pnpm build:ppt-wasm

# 预览生产构建（在 apps/web-vue 下）
pnpm --filter @file-online-preview/web-vue preview
```

二进制 `.ppt`（97–2003）预览：开发服务启动后打开 `/ppt`，解析在 Web Worker 中调用 `ppt-parser` WASM。计划与阶段说明见 `docs/ppt/rewrite/`。

## 使用说明

### 演示应用

1. 执行 `pnpm dev` 打开页面
2. 点击「上传 PPTX」，或将文件拖到上传区
3. 使用侧栏缩略图、翻页、缩放与全屏查看

开发模式下，页头可切换 `apps/web-vue/public/pptx/` 中的本地示例；生产构建会排除该目录，避免把调试文件打进产物。

### 在代码中解析 PPTX

```ts
import { parsePPTX, parsePPTXInWorker } from '@file-online-preview/pptx'

// 主线程
const result = await parsePPTX(file, {
  imageMode: 'base64',
  videoMode: 'none',
  audioMode: 'none',
})

// Web Worker（推荐，避免卡顿）
const result = await parsePPTXInWorker(file)
```

解析结果主要字段：

| 字段 | 含义 |
|------|------|
| `slides` | 幻灯片及元素列表 |
| `themeColors` | 主题色 |
| `usedFonts` | 用到的字体 |
| `size` | 幻灯片宽高 |

支持的元素类型包括：`text`、`image`、`shape`、`table`、`chart`、`video`、`audio`、`diagram`、`math`、`group`。

### 在 Vue 中嵌入预览器

```vue
<script setup lang="ts">
import { PPTXViewer } from './components/pptx-viewer'
</script>

<template>
  <PPTXViewer :src="fileOrUrl" title="演示文稿" />
</template>
```

`src` 可为 `File`、远程 / 本地 URL 字符串。

## 开发约定

- 计划类文档：`docs/plans/`
- 通用文档：`docs/`
- 代码规范：`docs/rules/`
- 临时调试产物：统一放在仓库根目录 `tmp/<你的标识>/`，详见 [`tmp/README.md`](./tmp/README.md)

## 参与贡献

1. Fork 本仓库
2. 新建功能分支（如 `feat/xxx`）
3. 提交变更
4. 发起 Pull Request

## 许可证

请以仓库内实际许可证文件为准；若尚未添加，贡献前请与维护者确认。


## 参考网站

- File Viewer https://file-viewer.app/