15 · 多文件预览支持

字数: 0 字 时长: 0 分钟

一句话

后台要预览 pdf / docx / xlsx / 图片 / markdown / xmind 等 → 按类型选 不同渲染器，统一封装预览组件 + 加载态 + 错误处理。

和你日常工作的关系

OA、网盘、审批附件预览。不会一种库吃遍天下：

类型	常见方案
PDF	pdf.js
Office	@vue-office/*、onlyoffice（服务端）
图片	img / viewer
Markdown	marked + highlight
思维导图	专用 xmind 库或转 svg

架构思路

1. 根据 扩展名或 MIME 映射到组件
2. 大文件：流式 / 分片 / 后端转 pdf
3. 统一 Loading、失败重试、不支持格式提示
4. 安全：鉴权 URL、禁止任意 iframe 外链（XSS）

演示

需本地跑：15.多文件预览支持/多文件预览的简单案例/ → npm i && npm run dev

面试

• 难点：格式多、兼容性、体积大、移动端。
• 说一个你熟的具体格式怎么渲染的即可，不必全背。

课程资料

15.多文件预览支持/15-技术讲解.md