Appearance
组件介绍
document-viewer-vue3 为 Vue 3 项目提供统一的文档与图片预览入口。传入一个本地 File 或远程文件 URL，组件会识别扩展名、按需加载对应渲染器，并管理加载状态、错误提示和预览交互。
适合的场景
- OA、知识库和内容管理系统中的附件预览
- 合同、报告、课件和数据表格的在线查看
- 不希望把本地文档上传到转换服务的前端应用
- 需要统一 Word、Excel、PDF、PowerPoint 与图片使用方式的 Vue 3 项目
核心能力
| 能力 | 说明 |
|---|---|
| 数据来源 | 支持本地 File 和远程 URL |
| 文件格式 | Word、Excel、PDF、PowerPoint、常见图片、HEIC/HEIF 与 TIFF |
| 显示控制 | 高度、主题、工具栏、初始缩放与缩放范围 |
| 交互能力 | 缩放、图片旋转与灯箱、下载原文件、打印 |
| 生命周期 | 加载、卸载、进度、缩放和错误事件 |
| 工程化 | ESM、UMD、TypeScript 类型声明、独立 CSS 入口 |
工作方式
组件先根据文件名或 filename 属性确定文档类型，再异步加载格式对应的渲染器。本地文件不会因为预览而主动上传；远程 URL 通过浏览器 fetch 读取，因此目标服务器需要允许跨域访问。
TIP
对于不包含扩展名的下载地址，请同时传入 filename="report.pdf"。格式识别以文件名扩展名为准。