vue3推出后很多技术大佬们都忙着来升级，本着学习和研究的心态来用vue3做项目，其中有一个要求就是：通过电脑端上传文件之后的文件列表中能够点击进行预览，包含文件媒体类型包括 图片 、word excel等文档文件、pdf、视频、音频 的预览针。经过在网上不断的搜索和查找相关资料，实现了常用的一些文件预览功能，为了让大家少走弯路，现在就介绍给大家：
1.office文档类型的预览：
首先看到的是word excel 等文档文件的预览，针对改问题开始还是网上搜寻了一些方法，毕竟这方面经验甚少，有人推荐a标签直接下载预览，显然不符合我们预期，有人推荐excel 使用sheetjs 但是我们word 也需要另找他法，最终还是确定了使用微软的在线预览，使用iframe作为载体进行
<iframe frameborder="0" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'> </iframe>
需要考虑的是当时element-plus的dialog 弹框里，iframe不能很好的撑开父元素所以又填充一些代码。并且加载过程比较慢，由于时间原因就没有考虑进行其他方法的尝试。
2.pdf类型的预览：
对于这种pdf的预览，感觉好解决啊，使用原来使用过的 npm install pdfjs-dist ，开搞就完了，万万没想到这个目前还没有支持vue3 所以理所当然的上来一跑就报错也是理所应当的，果断百度啊，百度说，这个pdfjs-dist vue3 不支持呐还，换个方法吧，主角来了下载之后将build和web文件夹放在我们的public文件下 做一下引用，注意自己的地址是不是对，放在了一个embed 里
data.pdfUrl = './pdf/web/viewer.html?file='+type; // 线上预览 <embed :src="pdfUrl" style="width: 100%; "/>
3. 图片类型：
图片类的很简单，直接上代码就可以了，处理一下url
<div v-if="showImg == true" class="dialog-body-content-base-style">
<el-image
class="image-preview"
:src="imgUrl"
/>
</div>
4.视频类型：
对于视频类型本来是想直接使用 video元素直接放里的但是本着做一个有追求的程序猿，追求自己的理想，没事就是折腾么，开始使用vue-video-palyer 进行视频预览，但是就是天不遂愿，完vue3 中报错 ，说白了又来了宝贝，没支持vue3 呗？ 推荐大家用一波vue-vam-video
npm install vue-vam-video -s
import VamVideo from "vue-vam-video";
components: {
VamVideo,
},
setup(props,context) {
const data = reactive({
videoOption: {
properties: {
poster: '',
src:"",
preload: "auto",
// loop: "loop",
// autoplay:"autoplay",
// muted:true
},
videoStyle: {
width: "100%",
// height: "600px",
},
controlsConfig: {
fullScreenTit:"全屏",
EscfullScreenTit:"退出全屏",
speedTit:"倍速",
yinliangTit:"音量",
jingyinTit:"静音",
playTit:"播放",
pauseTit:"暂停",
fullScreen:true,
speed:true,
listen:true
}
},
})
}
<vam-video
:properties="videoOption.properties"
:videoStyle="videoOption.videoStyle"
:controlsConfig="videoOption.controlsConfig"
@play="playVideo"
@canplay="canplayVideo"
@pause="pauseVideo"
></vam-video>
5. 音频类型：
吃了上边的亏，终于还是决定使用audio 这个标签了，直接使用就完了。
<audio :src="musicUrl" controls></audio>
综上建议大家考虑周全 ，像大厂的大佬们有自己的组件库，丝毫不担心，但是小厂的我们还是谨慎一点。 希望vue更多的组件库、功能库更加完善，毕竟站在巨人肩膀上是方便的。
网站