基于vue3+vite实现的文件在线预览功能【缝合怪】

前段儿时间在拉磨的时候，雇主有个小需求，要实现一个文件预览的功能，才开始想着是简单的office那一套玩意儿，但是看到文件列表后，发现各种类型的文件都有，图片、视频、文档、表格...... 甚至还有xmind类型！这我一看，我一个菜B前端咋实现这么多类型的预览啊，（开启我的吐槽模式）。

【经历一】 在网上找了一圈，发现一个好玩儿的网址：https://view.xdocin.com，这个网址能够实现各种文件的在线预览，包括压缩包，可以说是很强了，但是，一说到但是，大家应该都知道了，牛逼的东西往往都不是免费的，所以，这个实现方式被我否定掉了（要是一些公司要临时做一个在线预览的功能，这个还是可以用一下的，简单方便，传入文件地址就直接能看了）。

【经历二】 借鉴其他同学的文章，我又找到了一个在线预览的网址，但是这个是微软的，只支持Word、Excel、PPT，其他的如音视频、txt等还是需要自己来实现的，基于这个，我就先把支持的做了，因为这个链接不是国内的，那加载文件起来肯定比较慢，当我做完之后，产品开始BB叨，说这个太慢了，我说这个是微软，慢是正常的，产品说让再想想办法......

【经历三】 于是我又找，还真被我又找到了一个叫 kkFileView 的工具，但是这个需要后端配合，在自己的服务上进行部署.....，很明显，要是成功实现了功能，那我这个分享也不至于出现了，总而言之，后端说这个开源项目bug太多，部署出问题......excuse me ？不会就是不会，扯那些淡干啥......。因为有其他的工作在赶着，这个功能因为后端说的实现不了就搁置一旁了。（虽说搁置先不做，但是我还是做了点击下载至本地查看的功能）

最近，公司的ZZ产品突然又找到我说要做这个东西，还要的很着急，我说常见的我能做上，如音视频、图片、txt这些都没问题，但是之前做的文档那些你说的太慢了，我现在做，那如后缀为 .doc .xls .ppt 的这三个是无法实现的，但是 .docx xlsx pptx 这种没问题。在我的一通解释下，重点来了，ZZ产品扭头走了，背着我找了市面上的外包，在当天下午，给我发了一个vue文件，说这是人家实现的，你拿去抄吧！ 我看到是一个vue文件，还没点开之前，虎躯一震，心想，牛B啊，一个文件都搞定了，高手确实是高手。

于是我点开了文件，从上到下一看，眼一黑，RNM，这就是高手做的？这TM不是我早都实现了，不是你不满意，嫌慢，怎么，人家的就是香？人家的就是大？，无图言屌，没图我放段代码，大家自己感受吧，预览功能的核心方法！

js 复制代码

// 使用计算属性来获取预览URL
const getPreviewUrl = (url: string) => {
    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
}

这会儿也不说慢了？这会也不说用户不满意了？这个事儿，说实在的，给我狠狠的恶心到了，我也不吭声，直接一套CV复制到已经很💩的项目上了，后面ZZ产品说这个不能预览，那个显示太慢之类的话，我一口这个功能是你找的外包做的，要是哪里不太对，你再找外包修改一下给我就行了 给回绝了。过后，我越想这个事儿我心里越堵的慌，在日常摸鱼中也不痛快！于是我决定，自己写一个，MMP，实现了也不给你用！！！！！！

** * * * * * * * * * * * * * * * * * * * 正文开始 * * * * * * * * * * * * * * * * * * * *

此功能基于vue3+vite+ts（TS能力不行，凑合着用的）实现的，当前可实现以下文件预览：

文档类："docx", "xlsx", "pdf", "pptx" | "doc", "xls", "ppt"；

视频类："mp4", "avi", "wmv", "rmvb", "flv", "mkv"；

图片类："jpg","png","gif","jpeg","webp","jpeg"；

音频类：'mp3', 'wav', 'm4r', 'ogg', 'flac', 'aac'；

文件类："txt", "json", "html", "md";

导图类："xmind"

使用方式：在所需要的预览的文件上，通过自定义指令 v-preview，传入{url: '', name: ''}即可实现。

js 复制代码

<ul>
 <li v-for="(item, index) in urlList" :key="item.url" @click="active = index" :class="{active: active === index}" v-preview="item">{{ item.name }}</li>
</ul>

实现方式：各种缝合（轻喷）

"docx", "xlsx", "pdf", "pptx" 通过 vue-office

js 复制代码

"@vue-office/docx": "^1.6.2",
"@vue-office/excel": "^1.7.11",
"@vue-office/pdf": "^2.0.2",
"@vue-office/pptx": "^0.0.2",

"doc", "xls", "ppt" 这种我搜索大量的文档，最简单的，还是通过微软的来实现吧，实际业务中建议用户下载至本地进行查看

js 复制代码

const getPreviewUrl = (url: string) => {
 return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
}

视频类

js 复制代码

"vue3-video-play": "^1.3.2",

音频类的通过 howler

js 复制代码

 "@types/howler": "^2.2.12",
"howler": "^2.2.4",

导图XMind

js 复制代码

"xmind-embed-viewer": "^1.2.0"

图片就是img标签了，但是支持滚轮放大缩小拖拽查看

文件类的txt html等就是直接请求支本地再进行展示

技术有限，只能通过这种缝合的形式来实现了，纯前端的话，要想完全实现各种文件预览我觉得还是有难度的，公司后端能力可以的话，建议还是看看经历三，毕竟，这活儿不是前端干就是后端干，那为啥不是后端干🤣

在接下来空闲时间，我再完善下，给加载动画啥的补上去，看看再加点其他啥类型的预览功能，争取让"缝合怪"更强大，各位同学如果有好的建议或指示，欢迎评论~

代码地址： gitee 仓库