uniapp(移动端H5、APP、小程序兼容)实现点击下载文档

目录

一、移动端H5实现下载预览文档

二、小程序、APP下载预览文档

一、移动端H5实现下载预览文档

用uniapp开发微信公众号网页H5实现下载文档功能时，在微信开发者工具上点击下载调试会显示告警。

1.为了防止在手机上也打开不了链接情况，在点击下载的同时可以去复制文档链接，在手机浏览器打开

//复制链接
uni.setClipboardData({
	data: url,
	success: function() {
		console.log('success'); //调用方法成功
    }
})

 2.利用a标签实现打开文档链接，这个方法在移动端H5可以直接打开，亲测有效！！！

var oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名，默认是'下载'
oA.target = "_blank"
oA.href = url; //临时路径再保存到本地
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
			

完整代码

// 点击下载文件
            //file带有文件路径的数据
			handleFile(file) {
				console.log(file);
				let {
					documentFile
				} = file
				if (documentFile) {
					let url = API.file + documentFile
					uni.setClipboardData({
						data: url,
						success: function() {
							console.log('success'); //调用方法成功
						}
					})
					console.log(url);
					var oA = document.createElement("a");
					oA.download = ''; // 设置下载的文件名，默认是'下载'
					oA.target = "_blank"
					oA.href = url; //临时路径再保存到本地
					document.body.appendChild(oA);
					oA.click();
					oA.remove(); // 下载之后把创建的元素删除
				}
			},

二、小程序、APP下载预览文档

直接使用uniapp的api

//签订合同下载
Download() {
    //下载文档
	uni.downloadFile({
		url: 'url',//下载地址接口返回
		success: (data) => {
			if (data.statusCode === 200) {
				//文件保存到本地
				uni.saveFile({
					tempFilePath: data.tempFilePath, //临时路径
					success: function(res) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件已保存：' + res.savedFilePath, //保存路径
							duration: 3000,
						});
						setTimeout(() => {
							//打开文档查看
							uni.openDocument({
								filePath: res.savedFilePath,
								success: function(res) {
									// console.log('打开文档成功');
								}
							});
						}, 3000)
					}
				});
			}
		},
		fail: (err) => {
			console.log(err);
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '失败请重新下载',
			});
		},
	});
},