微信内置浏览器不支持下载文件的解决方案

微信内置浏览器不支持下载文件的解决方案

在微信的内置浏览器(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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值