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

一、第一种方式:(好像在ios系统上不兼容)

1.1实现效果:点击文件附件,下载到本地

【下载文件】uniapp开发小程序,下载文件并保存到本地_第1张图片

【下载文件】uniapp开发小程序,下载文件并保存到本地_第2张图片

【下载文件】uniapp开发小程序,下载文件并保存到本地_第3张图片
【下载文件】uniapp开发小程序,下载文件并保存到本地_第4张图片

【下载文件】uniapp开发小程序,下载文件并保存到本地_第5张图片

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:效果图

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

【下载文件】uniapp开发小程序,下载文件并保存到本地_第6张图片
【下载文件】uniapp开发小程序,下载文件并保存到本地_第7张图片
【下载文件】uniapp开发小程序,下载文件并保存到本地_第8张图片

2.2实现代码:

下载按钮:

	<image @click="downloadsFun(infos.file,infos.id)" src="../../static/images/[email protected]" 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,
				})
			},

ending~

你可能感兴趣的:(uniapp,Vue,小程序,javascript,前端)