一、背景

企业微信自建项目中要求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文件，代码如下：

三、preview-file使用

1.template中使用方式

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使用会自动跳转浏览器并下载。

效果图展示：