uniapp+Vue3 开发小程序的下载文件功能

小程序下载文件，可以先预览文件内容，然后在手机上打开文件的工具中选择保存。

简单示例：（复制到HBuilder直接食用即可）

<template><view class="container-detail"><view class="example-body" @click="openFile(item.url)" v-for="(item, index) in fileList" :key="index"><image class="images" src="/common/images/files.png" mode="aspectFit"></image><view class="name">{{item.name}}</view></view></view>
</template><script setup>let fileList = ref([{"name":"file1.jpg","extname":"jpg","url":"https://images.dog.ceo/breeds/retriever-curly/n02099429_817.jpg",},{"name":"file2.jpg","extname":"jpg","url":"https://images.dog.ceo/breeds/doberman/n02107142_16400.jpg",},{"name":"somefile.pdf","extname":"pdf","url":"https://example.com/somefile.pdf",}])function openFile(url) {const isImgType = ['jpg', 'png', 'bmp', 'jpeg', 'webp']uni.showLoading({ title: '加载中...' })uni.downloadFile({url,success: (res) => {const fileType = res.tempFilePath.split('.').pop()if (isImgType.includes(fileType)) {uni.previewImage({ // 调用微信api预览图片showmenu: true, // 开启时右上角会有三点，点击可以保存urls: [res.tempFilePath],current: res.tempFilePath,success: (res) => {uni.hideLoading()console.log('打开图片成功')},fail: (res) => {uni.hideLoading()console.log(res)console.log('打开图片失败')},})} else {uni.openDocument({filePath: res.tempFilePath,showMenu: true, // 开启时右上角会有三点，点击可以保存success: (res) => {uni.hideLoading()console.log('打开文档成功')},fail: (res) => {uni.hideLoading()console.log(res)console.log('打开文档失败')},})}},fail: (e) => {uni.hideLoading()console.log(e)},})}</script><style lang="scss" scoped>
.container-detail {padding: 30rpx;.example-body {padding: 10rpx 0;display: flex;justify-content: space-between;align-items: center;margin-bottom: 32rpx;.images {width: 40rpx;height: 40rpx;image {width: 100%;height: 100%;}}.name {flex: 1;font-size: 28rpx;font-family: PingFang HK, PingFang HK-400;font-weight: 400;text-align: LEFT;color: royalblue;margin-left: 22rpx;}}
}
</style>