使用a标签下载文件,解决页面跳转的问题

最近在开发一个项目时,发现一个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.net/myth_g/article/details/79650605

  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笑笑菇凉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值