admin管理员组文章数量:1585968
最近在开发一个项目时,发现一个bug,导出功能在谷歌浏览器和360浏览器上点击后一切正常,但是在QQ浏览器上,点击导出页面就会跳转。而且最奇怪的是,另一个同事电脑上的QQ浏览器就不存在这个问题。我在折腾了后端人员一个小时之后(真的好抱歉。。),突然发现我的QQ浏览器是兼容模式运行的,切换成极速模式就一切正常了。
所以问题其实还是出在浏览器内核上,但是你不能强制要求客户的浏览器都用极速模式,我们只能解决问题。
附上代码:
export (url, params) {
let queryStr = '?1=1'
if (params) {
for (let i in params) {
queryStr += `&${i}=${params[i]}`
}
}
console.log('导出参数:', params);
var ele = document.createElement('a');
ele.download = process.env.VUE_APP_BASEURL + url + queryStr;
ele.style.display = 'none';
ele.href = process.env.VUE_APP_BASEURL + url + queryStr;
ele.target="_blank"; // 针对 ie模式 的浏览器
// 触发点击
document.body.appendChild(ele);
ele.click();
// 然后移除
document.body.removeChild(ele);
}
关键代码就是 ele.target="_blank"
加上这一句之后,点击导出按钮,会弹出一个新的标签页然后马上消失,同时在页面出现下载对话框,本页面也不会跳转了。
顺便附上,如何让浏览器强制下载它能识别并预览的文件,让后台兄弟们加一句这个:
response.setHeader(“content-disposition”, “attachment;filename=” + realName);
// 强制浏览器下载
response.setHeader("content-disposition", "attachment;filename=" + realName);
// 浏览器尝试打开,支持office online或浏览器预览pdf功能
response.setHeader("content-disposition", "inline;filename=" + realName);
此处附上这个tip的原文链接:
https://blog.csdn/myth_g/article/details/79650605
版权声明:本文标题:使用a标签下载文件,解决页面跳转的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1727975522a1140608.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论