首先需要知道，微信公众号打开的网页使用的是微信内置的浏览器；而微信内置浏览器是屏蔽下载功能的，所以如果微信公众号有下载任务的话，只能借助于其他浏览器来实现.也就是跳到其他浏览器下载：
所以你是否经常会遇到，点击某个连接后，提示你是否用浏览器打开（类似这样）
那如何实现这个功能呢，我们先理一下逻辑：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、如果你只想直接下载，而不是直接被浏览器打开的话，建议，通过后台接口，返回文件流，并做相应设置，则浏览器会自动下载
第一次写分享，有点啰嗦，如有不对或者更好的办法，欢迎留言分享
网友评论