# ibiz-file-previewer

**Repository Path**: iBizModeling/ibiz-file-previewer

## Basic Information

- **Project Name**: ibiz-file-previewer
- **Description**: ibiz文件预览器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-01-13
- **Last Updated**: 2026-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文件预览

## 项目初始化

1. 使用 Vite 创建 preact + TypeScript 项目
2. 安装必要依赖：sass（SCSS 支持）、tsc（TypeScript 类型检查）
3. 配置项目结构，创建组件目录和样式目录

## 预览壳组件

1. 创建 `file-preview-shell.tsx` 组件
2. 创建 `file-preview-controller.ts` 控制器模块
3. 实现参数处理逻辑：
   - 接收 name、id、url 参数
   - 处理 id 和 url 的二选一逻辑
   - 处理 name 参数的获取逻辑
   - 实现 url 转 id 的下载和上传逻辑
4. 实现文件信息展示：
   - 解析文件名
   - 解析引擎信息
5. 实现下载功能模块：
   - 下载源文件
   - 复制文本内容
   - 导出为 PDF（非 PDF 文件）
   - 导出为 MD（非 MD 文件）
6. 实现文件类型处理：
   - 基于文件后缀解析文件类型
   - 基于文件类型计算文件引擎
   - 动态分发至对应预览组件
7. 逻辑与 UI 分离：
   - 预览壳组件负责界面绘制
   - 控制器模块实现功能逻辑

### 参数输入

| 参数名称              | 类型                                                         | 说明                                                         | 默认值 |
| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------ |
| theme                 | `'light' \| 'dark'`                                           | 主题                                                         | 'dark' |
| selector              | string                                                       | 预览组件的挂载点（必填）                                     | ---    |
| getContent            | `(id: string,type: string,cat: string): Promise<string \| object \| undefined>` | 获取预览文件的内容，参数依次为：文件标识，文件类型，存储位置名称 | ---    |
| getImgContent         | `(id: string, type: FileType, cat: string): Promise<string>` | 获取预览图片内容，参数依次为：文件标识，文件类型，存储目录，标准图片返回值必须为：图片url路径或者图片Base64内容，SVG图片必须为：图片html内容 | ---    |
| upLoadFileToOss       | `(url: string): Promise<{ id: string; name: string; cat: string } \| undefined>` | 上传文件至oss，参数为上传路径                                | ---    |
| downLoadFile          | `(id: string, name: string, cat: string): Promise<void>`     | 下载文件，参数依次为：文件标识，文件名称，存储位置名称       | ---    |
| actionSuccessCallBack | `(type: string): Promise<void>`                              | 文件操作成功回调，参数为文件类型                             | ---    |

## 预览组件

1. 实现组件输入参数处理：

   - 接收预览组件控制器对象

2. 实现交互控制：

   - 根据不同的文件引擎类型实现以下功能：

     MD引擎类型：预览、查看大纲、下载源文件、复制文本内容

     HTML引擎类型：预览、下载源文件、复制文本内容

     TXT引擎类型：预览、下载源文件、复制文本内容

     PDF引擎类型：预览、缩略图、顺/逆时针旋转、上/下一页、引擎模式切换、显示模式切换、缩小/放大、重置、下载源文件

     IMG引擎类型：预览、顺/逆时针旋转、图片拖拽、显示模式切换、缩小/放大、重置、下载源文件、复制文本内容

3. 逻辑与 UI 分离：

   - 预览组件负责界面绘制
   - 控制器模块实现功能逻辑

## 样式实现

1. 使用 SCSS 实现主题和响应式样式，支持暗色和亮色两套主题
2. 确保 HTML 结构语义化和可访问性

## 技术实现规范

- 使用 TypeScript 实现类型安全的组件开发
- 使用 SCSS 实现响应式样式及组件主题
- 确保 HTML 结构语义化且符合可访问性标准

## 文件引擎

### MD引擎

| 文件扩展名 | 支持情况 |
| ---------- | -------- |
| html       | 已支持   |
| md         | 已支持   |

### HTML引擎

| 文件扩展名 | 支持情况 |
| ---------- | -------- |
| xls        | 已支持   |
| xlsx       | 已支持   |
| et         | 已支持   |
| doc        | 已支持   |
| docx       | 已支持   |
| wps        | 已支持   |

### TXT引擎

| 文件扩展名 | 支持情况 |
| ---------- | -------- |
| txt        | 已支持   |
| xml        | 已支持   |
| json       | 已支持   |

### PDF引擎

| 文件扩展名 | 支持情况 |
| ---------- | -------- |
| pdf        | 已支持   |
| doc        | 已支持   |
| docx       | 已支持   |
| wps        | 已支持   |
| ppt        | 已支持   |
| pptx       | 已支持   |

### IMG引擎

| 文件扩展名 | 支持情况 |
| ---------- | -------- |
| jpg        | 已支持   |
| png        | 已支持   |
| gif        | 已支持   |
| bmp        | 已支持   |
| jpeg       | 已支持   |
| webp       | 已支持   |
| ico        | 已支持   |
| svg        | 已支持   |

**注意**：同一个文件扩展名可能有多个引擎，如：**doc**，**docx**，**wps** 等，这些文件均可通过切换引擎的方式更改预览内容