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版权协议,转载请附上原文出处链接和本声明。