admin管理员组

文章数量:1626246

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

在微信的内置浏览器（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/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>

本文标签： 不支持浏览器解决方案文件

版权声明：本文标题：微信内置浏览器不支持下载文件的解决方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728946927a1181283.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。