h5页面无法下载文件,如何解决?

目前有一个需求,web网页改h5页面嵌套到其他手机app页面中,在pc浏览器调试时,可以下载文件,但是打包集成到app里时点击下载按钮却没有反应,无法调试也不知道出了啥问题。下面是代码,用的是vue2,是在后台管理系统项目里写的,那边app是用iframe来显示我网页的,有没有兄弟有经验的来说说!


  this.$http({
        url: this.$http.adornUrl(
          `/robot/acceptFailedStatistic/downloadStatistic`
        ),
        method: "get",
        responseType: "arraybuffer",
        params: this.$http.adornParams({
          staffId: this.staffId,
          bussinessType: this.bussinessType,
          downloadExeclType: 2,
          time,
        }),
      }).then((res) => {
        let headers = res.headers;
        let blob = new Blob([res.data], { type: headers["content-type"] });
        let link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        const fileName = decodeURI(headers["content-disposition"]);
        if (fileName.includes("filename=")) {
          let title = fileName.split("=")[1];
          link.download = title;
          link.click();
          this.downloadShow = false;
          this.shows = false;
        } else {
          this.$message.error("下载出错");
        }
      });

app中下载功能调用原生的提供的方法可实现

如果是用网页传输数据过渡的话,网页需要获取一下用户的token 和一些参数才行,这里需要注意一下iframe 默认是get请求,使用的时候记得嵌套一个form标签,这样才能变成post 请求,如有帮助记得采纳

你这个问题很明显就是app端的浏览器不兼容你的这个下载方法
最快的解决办法就是让后台改一下,不使用文件流的下载方式,而是后台把文件创建好放到服务器上,直接返回给你一个下载地址,但是这样会在服务器上生成很多垃圾文件