首先需要知道,微信公众号打开的网页使用的是微信内置的浏览器;而微信内置浏览器是屏蔽下载功能的,所以如果微信公众号有下载任务的话,只能借助于其他浏览器来实现.也就是跳到其他浏览器下载:
所以你是否经常会遇到,点击某个连接后,提示你是否用浏览器打开(类似这样)
那如何实现这个功能呢,我们先理一下逻辑:1、需要有一个连接或者按钮点击或者其他事件触发 。2、触发后跳转到如上图所示的页面,再从此页面打开有浏览器。这样我们就需要第三步,3、判断当前页面是微信浏览器还是 其他浏览器,微信浏览器如上图做提示,其他浏览器则下载4、需要有个地址,一般就是你服务器上文件的地址、或者也可选择访问某个接口,返回文件流
好,逻辑清楚了,开始代码(这里我用的uniapp进行的开发,所以有一些对应的语法,我尽量注释)
1、触发,这里我用一个“下载”按钮触发
<text class="fright" @tap="download(item.refileName)">下载</text> //这是uniapp的写法 ,HTML也可以写成如下
<span onclick="download(item.refileName)">下载</span>
2、跳转
download(ad){
uni.navigateTo({ url:'../downreport/downreport?path='+ad })// 同 window.location.href和 window.open
}
注意:跳转链接的时候要将 你服务器上文件的地址作为参数传递过去path=ad
3、在一个名为downreport的页面(最好是新建一个下载页面,可以复用) 在这个页面中获取传递过来的地址(path)参数
onLoad(opt){ this.path = opt.path } //onload是 uniapp语法中当页面加载的时候执行的方法 ,opt参数则是页面传递的参数
(这个用JS可以通过location.search获取参数字符串,多参数可用字符串拼接处理)
写一个函数 checkUrl 判断当前浏览器是微信浏览器还是其他,如果是微信浏览器,你则需要显示如上图那样的图片,去引导用户打开其他浏览器,如果当前已经是你打开的其他浏览器,那你就可以直接location.href就可以下载或者预览文件了
so.先写判断
checkUrl(){
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;// '微信浏览器'
} else {
return false;// 其他浏览器
}
}
然后,根据判断选择展示引导图,或者下载:
download(){
let is_weixin = this.checkUrl(); //调用checkUrl 得到返回结果
if(is_weixin){
this.display = "block" //可以理解为this.display绑定了 引导图img的display属性,当前是微信浏览器,展示引导图
}else{
this.display = "none" //当前为其他浏览器 ,隐藏引导图
window.location.href = this.path //讲之前存储的文件地址,赋值给当前 地址栏,即可预览或者下载文件了
}
}
如果有对上面的判断浏览器 执行相应操作有疑问的,需要知道当你从微信浏览器上的 …打开其他浏览器的时候,此时的location.href 依然是downreport页面,如果不做判断区别进行操作,那你就会在别的浏览器也显示 引导页面;或者在微信浏览器中就跳转到文件地址页面(而微信浏览器会默认回到首页面)
题外话:1、当你的path是文件地址的时候,图片等可以被浏览器识别,解析的文件浏览器会直接打开图片而不是下载,当然你可以选择另存为保存,如果是像Word ,PPT等文件的话,当前浏览器不能完全识别解析,则会自动下载,或者让你选择是下载还是打开 ,如下图
2、如果你只想直接下载,而不是直接被浏览器打开的话,建议,通过后台接口,返回文件流,并做相应设置,则浏览器会自动下载
第一次写分享,有点啰嗦,如有不对或者更好的办法,欢迎留言分享