安卓Android 微信 附件下载跳转至QQ浏览器后 无法显示（二次跳转）的问题

vue 项目里遇到了 在微信里下载附件（非apk）的问题 如 txt/pdf/Excel/doc/docx 等 先分析

区分ios和安卓
苹果/ios/
ios 系统 无法下载 会直接打开pdf excl doc docx 等文件 不做处理 也处理不了 也就一句话

window.open(url, “_blank”);
或者是
const a = document.createElement(“a”);
a.href = url;
a.style.display = “none”;
a.target = “_blank”;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

安卓/Android
微信内部使用的是qq浏览器下载插件
1 手机里没有qq浏览器
会推荐你使用qq浏览器 或者使用第三方其他的浏览器 正常使用

2 手机里有qq浏览器 微信里点下载的时候 会跳转到qq浏览器里启用下载 这里 问题就出现了
某种神秘的力量 导致 qq浏览器首页覆盖了下载的页面 所以也就无法下载

解决方案
1 可以通过数据流的方式进行下载 后台进行配合 这种方式只适合单一的文件类型 pass
2 引导用户使用使用第三方浏览器 比如添加一个引导页 ？？？太傻 我拒绝
**3 加上 noopener 属性 **

解释一下
什么是 noreferrer 标签？

谷歌原话
Don’t follow links on this page" or "Don’t follow this specific link.
翻译
nofollow 标签就是告诉百度、Google 等搜索引擎不要通过使用此标记的链接传递任何值。
如果有人从使用此标记的链接到达您的网站，您的分析将不会显示谁提到该链接。相反，它会错误地显示为您的统计流量报告中的直接流量。

参考 nofollow、noopener和noreferrer标签的区别

代码部分

//附件url
//this.data_info.file

//下载链接
<span @click="download"> 附件下载 </span>

//附件下载
download() {
  var u = navigator.userAgent;
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
  if (isiOS) { 
    window.open(this.data_info.file, "_blank");
  } else if (isAndroid) {
    const a = document.createElement("a");
    a.href = this.data_info.file;//附件Url
    a.style.display = "none";
    a.target = "_blank";
    a.setAttribute('rel', 'noreferrer');
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
},

tip:
如果你在链接上使用 target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。