Agent Skills
返回列表
Word 文档在线预览

Word 文档在线预览

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_f1b049da/word-inline-viewport。

技能介绍

解决痛点:前端直接预览 Word 文档

很多 Web 应用需要用户上传 Word 文档并在页面内预览。传统方案通常依赖后端转换为 PDF,或者调用 Office Online 等外部服务,这增加了服务器负担或引入了外部依赖。本技能基于 docx-preview,让前端直接在浏览器中渲染 .docx 文件,无需安装 Office 或 WPS。

核心工作流与强制反馈机制

技能定义了一套标准的接入流程。首先,你需要准备一个宿主节点,并在每次渲染前清空容器以避免残留。调用 renderAsync 时,必须传入 .docx 文件的二进制数据。

最关键的是Load Signal 协议:禁止静默成功。每次渲染成功后,必须同时触发界面文案更新(至少包含文件名)和 Toast 提示(如 ElMessage.success)。如果失败,需清空宿主并给出明确错误。

适用边界与注意事项

仅支持 .docx (OOXML) 格式,旧版 .doc 需提示用户转换。对于大文件,应使用 arrayBuffer 读取,避免内存溢出。若从跨域 URL 加载,需处理 CORS 和鉴权。推荐使用 Vue 3 配合 Element Plus 的 el-upload 组件实现完整交互,详见 templates/vue-el-preview.md。

使用场景

  • 后台管理系统需要支持用户上传.docx文件并在页面内直接预览内容
  • 文档协作工具需要集成浏览器内Word文档预览功能,无需调用外部服务
  • 内容审核平台需要实时预览用户上传的Word文档内容进行合规检查

适合人员

  • Web前端工程师:需要在Vue项目中集成Word文档预览功能,替代后端转换方案
  • 全栈开发者:需要为后台系统添加轻量级文档预览模块,避免依赖Office Online
  • 企业应用开发者:需要实现用户上传Word文档后即时预览的需求,提升交互体验