扫码跳转h5下载（批量）文件，判断当前是微信浏览器？

81 阅读 0 评论 54 点赞

我是靠谱客的博主冷艳唇膏，最近开发中收集的这篇文章主要介绍扫码跳转h5下载（批量）文件，判断当前是微信浏览器？，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求是这样的，微信扫码（链接就是h5的地址），跳转到h5页面，然后是下载文件（图片，ppt，pdf等等格式都有）以及批量下载
坑来了，微信自己的浏览器各种问题，首先是下载完的文件在哪可以找到？其次是点击右上角分享地址还不对，还有各个手机的机型批量下载有的手机还不生效，哎
还有一个问题是，像pdf这种文件在pc端浏览器a链接下载是预览而不是直接下载，在移动端直接不生效，哎
再有看了一些文档说a标签有一个download属性，可以直接下载，但是我这个属性失效？怎么回事，百度一波，说是跨域不同源。。。哎
我的列表是后端传给我的URL数组，还是oss。。。不同源，哎
最后好不容易实现都能下载了，批量下载只下载最后一个文件？。。。哎
好在最后花里胡哨解决了

后端传的数据是这样的[{fileName:“12345.png”,url:“https://oss/…”,type:“image”},{fileName:“1115.pdf”,url:“https://oss/…”,type:“pdf”},{fileName:“11222.doc”,url:“https://oss/…”,type:“doc”}]

首先解决浏览器问题
判断当前是不是微信浏览器，是的话给一个蒙尘，给右上角三个点一个箭头，提示用户最好用浏览器打开，不然有问题。给一个按钮（我知道了），点击可以取消蒙尘，剩下的就不管了

created() {
    var url = window.location.search;
    console.log(url);
    if (url.indexOf("?") !== -1) {
      let strs = url.split("=");
      let dir = strs[1];
      this.dir = dir;
      this.queryShareNotes();
      this.weixinTip();
    }
  },
  methods: {
    //获取课件列表
    queryShareNotes() {
      this.$api.queryShareNotes({ dir: this.dir }).then((res) => {
        if (res.success) {
          console.log(res.data.files);
          this.shareNotes = res.data.files;
        }
      });
    },
    
    //判断是否是微信浏览器
    weixinTip() {
      var ua = navigator.userAgent;
      var isWeixin = !!/MicroMessenger/i.test(ua);
      if (isWeixin) {
        this.dust = true;
      } else {
        this.dust = false;
      }
    },
    //点击我知道了按钮
    iKnow() {
      this.dust = false;
    },
  },

接下来是下载文件，话不多说直接上代码，因为直接用a链接下载的话，类似pdf文件下载不了，但是用get这种方法，图片又下载不了，所以先判断类型，这种pc端和移动端都是生效的，包括微信浏览器也是生效的（下载成功的，就是用户不知道文件在哪找，所以才建议用别的浏览器打开的）

//下载课件
    download(item) {
      if (item.type === "image") {
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = item.url;
        link.setAttribute("download", item.filename); // 动态设置原文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        let x = new XMLHttpRequest();
        x.open("GET", item.url, true);
        x.responseType = "blob";
        x.onload = (e) => {
          //会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
          let url = window.URL.createObjectURL(x.response);
          let a = document.createElement("a");
          a.href = url;
          a.download = item.filename;
          a.click();
        };
        x.send();
        document.body.removeChild(a);
      }
    },

最后解决批量下载文件的问题，只能下载最后一个文件，给一个延时，上代码吧

//全部下载课件
    downloadAll() {
      this.shareNotes.forEach((r, i) => {
        let timer = setTimeout(() => {
          console.log(r, i);
          this.download(r);
        }, 1000 * i);
      });
      clearTimeout(timer);
    },