uniAPP手机端文件预览

article/2025/9/6 0:58:48

前言

最近基于uniAPP的app遇到了个需求，需要文件预览。其实官方已经提供了这个解决方案

uni.downloadFile(OBJECT)

uni.openDocument(OBJECT)

基于上面这两个API可以实现文件预览。本质上是先将文件下载到本地，然后调用手机内的其他app来打开你要预览的这个文件

简单写了个简单组件，样式比较丑，可以自己改一下

文件预览

<template><div class="file-view"><div v-for="(item, index) in list" :key="index" @click="downLoadFile(item)"><div class="file-item"><div class="file-name">{{ handleText(item[name]) }}</div><icon type="download" size="30" /></div><hr class="file-hr" /></div></div>
</template><script>
export default {props: {list: {type: Array,default: () => [],},name: {type: String,default: "",},},methods: {handleText(str) {if (typeof str === "string") {if (str.length < 20) {return str;}return str.substring(0, 20) + "...";}return "";},//下载附档downLoadFile(file) {uni.showLoading({mask: true,});uni.downloadFile({url: this.$downloadUrl + file.filePath, //仅为示例，并非真实的资源success: (res) => {if (res.statusCode === 200) {uni.hideLoading();var filePath = res.tempFilePath;uni.openDocument({filePath: filePath,success: function (res) {console.log("打开文档成功");},});}},});},},
};
</script><style scoped lang="scss">
.file-view {margin: 20rpx 50rpx;width: 600rpx;max-height: 200rpx;background: #f2f4f9;border-radius: 5px;overflow-y: auto;.file-item {height: 40px;width: calc(100% - 40px);margin-left: 30px;display: flex;align-items: center;.file-name {margin-right: 10px;font-size: 15px;color: blue;width: calc(100% - 20px);height: 40px;display: flex;align-items: center;}}.file-hr {border: 0;padding-top: 2px;background: linear-gradient(to right, transparent, #d0d0d5, transparent);}
}
</style>