uniapp h5浏览器文件下载

h5项目中包含一些doc,pdf,jpe,png,压缩包文件,要求在移动端的个个浏览器中下载,但是发现微信浏览器以及钉钉内置浏览器都不能下载文件,点击后没有任何反应,百度后,发现微信浏览器会拦截h5页面的下载资源,钉钉不知道是啥原因,但是感觉跟微信内置浏览器一样,应该是被拦截了,文件下载只适用于手机浏览器

<view @click="downFile(file)"></view>


// 保存到本地并自动点击
			saveAs(data, name) {
				var urlObject = window.URL || window.webkitURL || window;
				var blobUrl = new Blob([data]);
				var linkBtn = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
				linkBtn.href = urlObject.createObjectURL(blobUrl);
				linkBtn.download = name;
				linkBtn.click();
				uni.hideLoading();
			},
			downFile(file) {
				//判断是否在微信
				var ua = navigator.userAgent.toLowerCase();
				var isWeixin = ua.indexOf('micromessenger') != -1;
				//判断是否是钉钉
				var dingding = ua.indexOf('dingtalk') != -1;
				if (isWeixin || dingding) {
					// alert('在微信')
					uni.showToast({
						title:"请使用其他浏览器打开",
						icon: "none",
						duration:2000
					})
				}else {
					let that = this
					const url = file.flpath;//下载文件url
					const fileName = file.filename; //这里的filename是有后缀名的,没有后缀名的自己拼接一下
					var url2 = url.replace(/\\/g, '/');
					var xhr = new XMLHttpRequest();
					xhr.open('GET', url2, true);
					xhr.responseType = 'blob';
					xhr.setRequestHeader('sessionid', uni.getStorageSync('sessionid'));
					// 为了避免大文件影响用户体验,建议加loading
					xhr.onload = function() {
						uni.showLoading({
							title: '加载中',
						});
						if (xhr.status === 200) {
							// 获取文件blob数据并保存
							that.saveAs(xhr.response, fileName);
						} else {
							uni.hideLoading();
							uni.showToast({
								title:"下载文件失败",
								icon: "none",
								duration:2000
							})
						}
					};
					xhr.send();
				}
			},

版权声明:本文为sinat_41657240原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。