微信内置浏览器不支持下载文件的解决方案
在微信的内置浏览器(QQ内置浏览器也一样)里他屏蔽了下载链接,不管是app的下载链接,还是普通文件的链接都屏蔽了。
因此我们可以尝试通过默认打开浏览器进行移动端的文件下载功能。
思路:
1.首先我们需要写事件按钮
2.然后绑定对应的点击方法 通过点击此按钮 让页面跳转到新建的download页面
3.在此页面中先通过判断是否是微信浏览器 如果是 则提示用户在“默认浏览器中打开”
4.当用户选择在浏览器打开的同时 下载方法也将执行
代码实现
1.(这里是用vant-ui组件库开发)
<van-button type="info" @click="download()">文件下载</van-button>
download(){
this.$router.push({path:"/download"})
},
然后在download这个页面中,进行对应的逻辑处理
<template>
<div class="container">
<div v-show="test" class="test">
点击右上角选择在浏览器中打开
</div>
</div>
</template>
<script>
export default {
data() {
return{
token:"",
}
},
activated(){},
mounted() {
// 判断是否是微信浏览器
var is_wx=this.is_weixin()
if(is_wx){
this.test=true // 是微信浏览器,则“点击右上角选择在浏览器中打开”文字显示
}else{
this.test=false // 不是微信浏览器,则“点击右上角选择在浏览器中打开”文字不显示
this.download(); // 下载
}
},
methods: {
// 下载方法
async download() {
const params = {
token: this.token,
};
const url = 'https://zwfw.ga.wuxi.gov.cn/jlxk/user/applyWord';
this.$api.post( url, params, "", "", "blob","doc","文件");
},
// 判断是否是微信浏览器
is_weixin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
console.log('微信浏览器');
return true;
} else {
console.log("不是微信浏览器");
return false;
}
},
}
}
</script>