【下载文件】uniapp开发小程序，下载文件并保存到本地

小跳不会Coding

已于 2023-07-20 14:56:08 修改

阅读量1.2w

点赞数 4

分类专栏： uniapp Vue 文章标签：小程序 javascript 前端

于 2022-07-27 15:42:42 首次发布

本文链接：https://blog.csdn.net/weixin_48596030/article/details/126015687

版权

uniapp 同时被 2 个专栏收录

65 篇文章 10 订阅

订阅专栏

Vue

25 篇文章 1 订阅

订阅专栏

一、第一种方式：（好像在ios系统上不兼容）

1.1实现效果：点击文件附件，下载到本地

在这里插入图片描述

1.2具体代码：

<view class="contact" @click="downloadFun(item.enclosure)">点击下载</view>

// 下载附件
downloadFun(enclosure){
	var that = this
	//加载框动画
	uni.showLoading({title: '正在下载……'});
				
	// console.log(that.hostUrl + '/uploads'+ enclosure)
	uni.downloadFile({
		url: that.hostUrl + '/uploads'+ enclosure,//下载地址接口返回
		success: (data) => {
			console.log('打印data',data)
			if (data.statusCode === 200) {
				//隐藏加载框
				uni.hideLoading();
				//文件保存到本地
				uni.saveFile({
					tempFilePath: data.tempFilePath, //临时路径
					success: function(res) {
						// console.log('打印res',res)
						uni.showToast({
							icon: 'success',
							mask: true,
							// title: '文件已保存：' + res.savedFilePath, //保存路径
							title: '下载成功' , 
							duration: 2000,
					});
									
				//自动打开文档查看
				setTimeout(() => {
					var filePath = res.savedFilePath;
					uni.openDocument({  //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
						 filePath: filePath,
						showMenu: true,
						success: function (res) {
							 console.log('打开文档成功');
						}
					});
				}, 2000)
			}
		});
	}
	},
	fail: (err) => {
		console.log(err);
		uni.showToast({
			icon: 'none',
			mask: true,
			title: '文件下载失败',
		});
	},
});
},

———————————————————分割线————————————————————— ———————————————————分割线————————————————————— ———————————————————分割线————————————————————— ———————————————————分割线—————————————————————

二、第二种方式：

2.1：效果图

保存方式是：点击下载按钮，通过微信选择一个好友，发给给好友的方式，进行保存。

在这里插入图片描述

2.2实现代码：

下载按钮：

	<image @click="downloadsFun(infos.file,infos.id)" src="../../static/images/icon_download@2x.png" mode=""></image>

js：

			// 文件下载预览转发
			downloadsFun(myfile, myid){
				var that = this;
				uni.showLoading({
					title: '正在下载……'
				});
				wx.downloadFile({
				  url:that.hostUrl + myfile, // 下载url
				  // filePath: wx.env.USER_DATA_PATH,
				  success (res) {
					console.log('ressss',res)
					if(res.statusCode == 200) {
						//隐藏加载框
						uni.hideLoading();
						console.log('res.statusCode',res)
						// that.openFileEvs(res)
						wx.shareFileMessage({
							  filePath: res.tempFilePath,
								// fileType: 'xlsx',
							  success(data) {
								console.log('转发成功！！！',data)
								uni.showToast({
									icon: 'success',
									mask: true,
									// title: '文件已保存：' + res.savedFilePath, //保存路径
									title: '转发成功',
									duration: 2000,
								});
							  },
							  // fileName:'自定义文件名字.xlsx',
							  fail: console.error,
						})
					}
				  },
				  // fileName:'导出的文件名',
				  fail: console.error,
				})
			},