前端开发中实现附件在线预览功能，相信很多开发者都不陌生。最初我们按部就班地尝试了 pdf.js、pptx.js、vue-office 等库，但一番折腾后发现，对于 .doc 和 .xls 这类老格式的支持并不理想，预览效果总是不尽人意。后来偶然发现了一款名为 Flyfish Viewer 的插件，实际体验下来效果不错，特此分享给大家。
支持格式
该插件支持多达 206 种扩展名映射，覆盖 24 条预览链路，覆盖面非常广泛。
基本上常见的文档、图片、视频、模型文件等格式都能直接预览，大大减少了逐个适配的繁琐工作。
集成方式
Flyfish Viewer 提供了多种集成方式，开发者可以灵活选择。
无论是通过 npm 包管理工具安装，还是直接引用 CDN 文件，都能快速接入项目。
使用中的问题
笔者所在的项目是基于 Vue 2.6 的老项目，使用 npm 安装 @file-viewer/vue2.6 和 @file-viewer/preset-office 时，下载过程直接卡死，排查了半天也没找到原因。如果有成功通过 npm 安装的朋友，欢迎在评论区分享经验。
卡住就卡住吧，换个思路。直接改用纯 JS 集成方式，引入 CDN 文件。
Excel、Word 以及一些 .stl 文件都能正常预览，但预览 PPTX 时又遇到了问题。
报错提示 PPTX Worker 失败，原因是某个文件加载不上。可能的原因多种多样，但关键在于如何解决。
最简单的办法是将 cdn.jsdelivr.net/npm/@file-viewer/... 对应的文件直接下载到本地。
如果不想下载，也可以直接点击链接获取上面的源码文件。
如何使用
获取文件后，将其放入项目的 public 目录下，然后在 index.html 中直接引入，即可正常使用。
组件中使用
组件命名为 previewFile.vue，具体实现代码如下：
{{ dialogTitle }}
使用该组件的示例代码如下：
总结
总体而言，Flyfish Viewer 的使用并不复杂，但在集成过程中确实遇到了一些小问题，例如 npm 安装卡死、PPTX 预览报错等。不过这些问题都能通过本地化资源的方式解决。如果你的项目需要同时支持多种文档格式的在线预览，那么这款插件无疑是一个性价比很高的选择。
