78 lines
2.7 KiB
Markdown
78 lines
2.7 KiB
Markdown
# DOCXviewer
|
||
|
||
**控件功能**：用于在网页中嵌入并显示 `.docx` 文档内容，通过 Mammoth.js 将 Word 文档转换为 HTML 并渲染。
|
||
**类型**：普通控件（继承自容器控件 VBox）
|
||
**父类控件**：`bricks.VBox`
|
||
|
||
## 初始化参数
|
||
|
||
| 参数名 | 类型 | 说明 |
|
||
|-------|------|------|
|
||
| `url` | String | 指向 .docx 文件的 URL 地址，将在 `on_parent` 事件触发时加载 |
|
||
|
||
> ⚠️ 注意：需提前引入 Mammoth.js 库（如 CDN 资源）才能正常工作。
|
||
|
||
## 主要事件
|
||
|
||
| 事件名 | 触发时机 | 回调参数 | 说明 |
|
||
|--------|----------|---------|------|
|
||
| `on_parent` | 控件被添加到父容器后触发 | - | 自动调用 `set_url(this.url)` 开始加载并渲染文档 |
|
||
|
||
---
|
||
|
||
# EXCELviewer
|
||
|
||
**控件功能**：用于查看 Excel 文件（`.xlsx` 或 `.xls`），支持多工作表切换展示表格数据。
|
||
**类型**：容器控件
|
||
**父类控件**：`bricks.VBox`
|
||
|
||
## 初始化参数
|
||
|
||
| 参数名 | 类型 | 说明 |
|
||
|-------|------|------|
|
||
| `url` | String | 指向 Excel 文件的 URL 地址，在 `on_parent` 时加载 |
|
||
| `height` | String | 默认设置为 `"100%"`，确保高度占满父容器 |
|
||
|
||
## 主要事件
|
||
|
||
| 事件名 | 触发时机 | 回调参数 | 说明 |
|
||
|--------|----------|---------|------|
|
||
| `on_parent` | 控件挂载到父节点后 | - | 触发 `set_url(url)` 加载 Excel 数据 |
|
||
| `click`（子 Text 控件） | 点击某个 sheet 标签时 | sheetname, widget | 切换并显示对应的工作表内容 |
|
||
|
||
> ✅ 支持特性：
|
||
> - 动态生成工作表标签栏（HBox + Text）
|
||
> - 可滚动区域展示表格 HTML 内容（VScrollPanel）
|
||
> - 当前选中标签高亮（CSS 类 `selected`）
|
||
|
||
---
|
||
|
||
# PDFviewer
|
||
|
||
**控件功能**：用于在页面中内嵌显示 PDF 文件，逐页渲染为 Canvas 图像。
|
||
**类型**：容器控件
|
||
**父类控件**：`bricks.VBox`
|
||
|
||
## 初始化参数
|
||
|
||
| 参数名 | 类型 | 说明 |
|
||
|-------|------|------|
|
||
| `url` | String | PDF 文件的 URL 地址，由 `set_url` 使用 |
|
||
| `width` | String | 强制设为 `'100%'`，以适配父容器宽度 |
|
||
|
||
## 主要事件
|
||
|
||
| 事件名 | 触发时机 | 回调参数 | 说明 |
|
||
|--------|----------|---------|------|
|
||
| `on_parent` | 控件挂载完成后 | - | 调用 `set_url()` 启动 PDF 加载与渲染 |
|
||
| （内部 Promise） | PDF 成功加载后 | pdf 对象 | 遍历所有页调用 `add_page_content(page)` |
|
||
| （错误处理） | 加载失败时 | error | 输出 `'error'` 到控制台 |
|
||
|
||
> ✅ 渲染细节：
|
||
> - 使用 `pdfjsLib`（Mozilla PDF.js）解析和绘制 PDF
|
||
> - 每页使用 `<canvas>` 渲染，缩放比例固定为 `1.5`
|
||
> - 页面之间插入 `Splitter` 分隔条（视觉或布局用途）
|
||
|
||
> ⚠️ 注意：需确保全局已定义 `pdfjsLib` 并正确配置。
|
||
|