一、背景
企业微信自建项目中要求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')
) {
//doc
fileMessage.docShow = true;
} else if (fileMessage.fileName.endsWith('xlsx') || fileMessage.fileName.endsWith('xls')) {
//excel
fileMessage.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) { }
})
}
PS：Iphone与Android区分开来的原因：使用企业微信提供的文件预览的功能，Android使用会自动跳转浏览器并下载。
效果图展示：