各种格式文件预览

 pdf文件

<embed:src="文件的地址" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">

图片

<img :src="文件的地址" style="width: 100%;height: 100%;object-fit: contain;display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);" :οnlοad="加载成功返回">

txt

// 这属于一个通用的预览方式，可以预览多种格式的文件

 <iframe :src="文件的地址" width='100%' height='100%' frameborder='1' ></iframe>

 docx(安装 vue-office/docx）docx文件预览 | vue-office

<vue-office-docx :src="文件的地址" style="width: 100%;height: 100%;" @rendered="加载成功返回" />

 xlsx(安装 vue-office/xlsx）xlsx文件预览 | vue-office

 <vue-office-excel :src="文件的地址" style="width: 100%;height: 100%;" @rendered="加载成功返回" />

 视频 安装-ckplayer

// 调用

<shipinyulan :videoPath="文件的地址" @ReturnData="ReturnData" /> 

<!--* @Description: 视频预览文件
-->
<template><div class="playerContainer" ref="playerContainer"></div>
</template>
<script>
import { onMounted, onUnmounted, ref, watch } from 'vue'export default {props: {videoPath: {type: String,required: true}},setup (props, ctx) {const playerContainer = ref(null)let playerInstance = nullonMounted(() => {initPlayer()})watch(() => props.videoPath, () => {// 当路径变化时重新播放新视频playerInstance && initPlayer()})onUnmounted(() => {// 销毁播放器实例playerInstance && playerInstance.remove()})const initPlayer = () => {// 创建CKPlayer实例playerInstance = new ckplayer({container: playerContainer.value,autoplay: true, // 是否自动播放video: props.videoPath})playerInstance.duration(function (t) {// t=当前视频总时间console.log('当前视频总时间-----')console.log(t)ctx.emit('ReturnData', t)})playerInstance.time(function (t) {// t=当前播放时间console.log('当前播放时间-----')console.log(t)ctx.emit('ReturnData', t)})playerInstance.ended(function () {// 视频播放已结束console.log('视频播放已结束')ctx.emit('ReturnData', false)})playerInstance.error(function (obj) {// 监听到错误，obj=错误内容console.log('监听到错误-----')console.log(obj)ctx.emit('ReturnData', obj)})}return {playerContainer}}
}
</script>
<style scoped>
.card-header {text-align: center;border-bottom: 2px dotted #c5c5c5;
}.playerContainer {width: 100%;height: 100%;overflow: hidden;}
</style>