admin管理员组文章数量:1566976
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"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。
版权声明:本文标题:安卓Android微信附件下载跳转至QQ浏览器后 无法显示(二次跳转)的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727159626a1099779.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论