vue3+ts 实现文件在线预览

一、背景

企业微信自建项目中要求PC端也能进行文件预览，但是企业微信提供的接口只能在移动端使用，通过查阅资料修改成贴合项目的方法。参考：https://blog.csdn.net/w_t_y_y/article/details/115767747
kkFileView官方文档

二、preview-file组件

1.三种方式：
①、Office Web 查看器 http://view.officeapps.live.com/op/view.aspx?src=encodeuricomponent(url)
②、XDOC文档预览云服务只能免费使用几天，后续需要付费400/年/IP
https://view.xdocin.com/view?src=encodeURIComponent(url)
③、kkFileView http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url))

2.在components文件中，创建preview-file.vue文件，代码如下：

<template><div><!--图片--><!--d-flex f-jc-c：display:flex; justify-content: center;--><div class="d-flex f-jc-c" v-if="fileMessage.imgShow"><img :src="fileMessage.downloadUrl" /></div><!--doc，excel--><div v-else-if="fileMessage.docShow || fileMessage.excelShow"><!--Office Web 查看器 http://view.officeapps.live.com/op/view.aspx?src= --><!-- XDOC文档预览云服务  只能免费使用几天，后续需要付费 https://view.xdocin.com/view?src=encodeURIComponent(fileMessage.downloadUrl)  --><!-- kkFileView  http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url))  --><iframe class="child" frameborder="0":src="'https://view.xdocin.com/view?src=' + encodeURIComponent(fileMessage.downloadUrl)":style="{ width: fileStyle.width, height: fileStyle.height }"></iframe></div><!--音频--><div v-else-if="fileMessage.audioShow"><!-- loop="loop"  循环播放 --><audio id="myaudio" :src="fileMessage.downloadUrl" controls="controls" preload="preload">不支持audio标签</audio></div><!--视频--><div class="d-flex f-jc-c" v-else-if="fileMessage.videoShow"><video preload="auto" align="center" controls="true"><source :src="fileMessage.downloadUrl" type="video/mp4" /></video></div><!--其他不能预览的--><div v-else-if="fileMessage.otherShow"></div></div>
</template><script lang="ts" setup>import Video from 'video.js';import 'video.js/dist/video-js.css';interface Props {file: any}interface Emits {(event: 'downLoadFile', id: string | number): void
}interface FileMessage {fileId: string | number,fileName: string,downloadUrl: string,imgShow: boolean,docShow: boolean,excelShow: boolean,audioShow: boolean,videoShow: boolean,//其他不能预览的otherShow: boolean,}interface FileStyle {height: string,width: string
}const $props = defineProps<Props>();const $emits = defineEmits<Emits>();const file = computed(() => $props.file);// 文件信息
const fileMessage = reactive<FileMessage>({fileId: '',fileName: '',downloadUrl: '',imgShow: false,docShow: false,excelShow: false,audioShow: false,videoShow: false,//其他不能预览的otherShow: false,
})const fileStyle = reactive<FileStyle>({height: window.innerHeight + 'px',width: '100%'})// 判断文件类型
const judgeFileType = () => {fileMessage.fileName = file.value.fileName;fileMessage.downloadUrl = file.value.downloadUrl;fileMessage.fileId = file.value.id;console.log(fileMessage.downloadUrl, 'fileMessage');if (fileMessage.fileName.endsWith('png') ||fileMessage.fileName.endsWith('jpg') ||fileMessage.fileName.endsWith('jpeg') ||fileMessage.fileName.endsWith('gif')) {//图片fileMessage.imgShow = true;} else if (fileMessage.fileName.endsWith('docx') ||fileMessage.fileName.endsWith('doc') ||fileMessage.fileName.endsWith('pdf') ||fileMessage.fileName.endsWith('pptx') ||fileMessage.fileName.endsWith('ppt') ||fileMessage.fileName.endsWith('txt')) {//docfileMessage.docShow = true;} else if (fileMessage.fileName.endsWith('xlsx') || fileMessage.fileName.endsWith('xls')) {//excelfileMessage.excelShow = true;}else if (fileMessage.fileName.endsWith('mp3')) {fileMessage.audioShow = true;}else if (fileMessage.fileName.endsWith('mp4')) {fileMessage.videoShow = true;} else {// fileMessage.otherShow = true;$emits('downLoadFile', fileMessage.fileId);}}onMounted(async () => {await judgeFileType();})</script><style scoped lang="scss">
img {width: 50%;
}audio {width: 100%;
}video {width: 30%;
}.child {// width: 100%;// height: 100%;scrolling: no;frameborder: 0;border: 0;marginwidth: 0;marginheight: 0;
}
</style>

三、preview-file使用

1.template中使用方式

<!-- 查看附件 --><van-popup v-model:show="previewFile.fileShow"><preview-file v-if="previewFile.fileShow" :file="previewFile.fileMessage" @downLoadFile="downLoadFile"></preview-file></van-popup>

2.方法处理：

// 预览文件
const previewFile = reactive({fileShow: false,fileMessage: {id: '',fileName: '',downloadUrl: '',}
});// 下载附件 适配PC Iphone Android
const handleDownFile = (file: any) => {// 不是企业微信if (!isWxWork()) {return drNotify('请用企业微信打开');}isMobile() ?(isAndroid() ? window.open(handleImgSrc(file.group, file.filepath)) : handlePreviewFile(file)):PCpreview(file);
}// pc端预览文件
const PCpreview = (file: any) => {previewFile.fileMessage.id = file.id;previewFile.fileMessage.fileName = file.filename;// handleImgSrc --- 为下载的路径previewFile.fileMessage.downloadUrl = handleImgSrc(file.group, file.filepath);previewFile.fileShow = true;}// 下载附件  PC端
const downLoadFile = (id: string | number) => {previewFile.fileShow = false;downloadLogFile.derive({ id }).then((res: any) => {if (!res.message) { }})
}