使用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