bricks/docs/zh/docxviewer.md
2025-11-19 12:30:39 +08:00

2.7 KiB
Raw Blame History

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' 到控制台

渲染细节:

  • 使用 pdfjsLibMozilla PDF.js解析和绘制 PDF
  • 每页使用 <canvas> 渲染,缩放比例固定为 1.5
  • 页面之间插入 Splitter 分隔条(视觉或布局用途)

⚠️ 注意:需确保全局已定义 pdfjsLib 并正确配置。