uniapp 跨平台 H5 小程序文件下载

最新推荐文章于 2025-11-12 13:46:43 发布

原创最新推荐文章于 2025-11-12 13:46:43 发布 · 8.8k 阅读

8 ·

CC 4.0 BY-SA版权

小程序同时被 3 个专栏收录

13 篇文章

订阅专栏

6 篇文章

订阅专栏

uniapp

3 篇文章

订阅专栏

本文介绍了一个使用uniapp进行跨平台开发的项目，在兼容H5和小程序过程中遇到文件下载问题的解决方法。虽然uni.downloadFile可以跨平台使用，但uni.saveFile仅支持小程序，因此针对两端分别进行了不同的实现。

目前写的是一个兼容H5与小程序的项目。大多数内容还是可以比较完美的兼容的。但是到了下载文件这里就出了点问题。
uni.downloadFile虽然是可以兼容小程序和H5，但是uni.saveFile是不支持的。
这里就把两端分开写了。

HTML

									<!-- #ifdef H5 -->
									<a class="table-btn" href="http://xxxxxxxxxx" target='_blank'>下载入口</a>
									<!-- #endif -->
									
									<!-- #ifdef MP-WEIXIN -->
									<view class="table-btn" @click="downLoad(item.id)">下载入口</view>
									<!-- #endif -->

JS

			/**
			 * 下载到本地
			 */
			downLoad: function(id) {
				uni.downloadFile({
					url: 'http://xxxxxxxxxx?id=' + id, //仅为示例，并非真实的资源
					success: (e) => {
						if (e.statusCode === 200) {
							let tempFilePaths = e.tempFilePath;
							console.log('地址', tempFilePaths)
							/*注意：saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。*/
							uni.saveFile({
								tempFilePath: tempFilePaths,
								complete: (res) => {
									var savedFilePath = res.savedFilePath;
									console.log(savedFilePath);
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									})
								}
							});
						}
					}
				});
			},