vue3中如何实现各种类型文件进行预览功能

这篇文章将为大家详细讲解有关vue3中如何实现各种类型文件进行预览功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1.office文档类型的预览

首先看到的是word excel 等文档文件的预览，针对改问题开始还是网上搜寻了一些方法，毕竟我这经验甚少，有人推荐a标签直接下载预览，显然不符合我们预期，有人推荐excel 使用sheetjs 但是我们word 也需要另找他法，最终我还是确定了使用微软的在线预览，使用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;  // 线上预览

3. 图片类型

我觉这种类型 ，我们都不必多说，直接上代码就可以了，处理一下url

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            }        },    })}

5. 音频类型

吃了上边的亏，终于还是决定使用audio 这个标签了，直接使用就完了。

关于"vue3中如何实现各种类型文件进行预览功能"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。