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

使用a标签下载文件，解决页面跳转的问题相关推荐

js下载文件及前端使用a标签下载文件download属性失效问题
通常下载通过document.createElement创建虚拟a标签 function downloadFileUrl(val, url, fileName) {if (isVal) return ...
微信无法下载文件做提示跳转到浏览器
问题分析当我们在微信内分享链接或二维码的时候,我们会发现我们的网站是可以在浏览器里正常打开的,但就是不能在微信里打开,提示 " 已停止访问该网页 ",无论是聊天框也一样.说是系统 ...
Python-Flask入门，静态文件、页面跳转、错误信息、动态网页模板
Python-Flask入门及路由基础请参看Python-Flask入门,路由route.项目启动.修改网址端口.获取URL地址和参数.Form数据_无敌路路帅气的博客-CSDN博客本节重点讲述静态 ...
使用a标签下载文件，浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案背景一.HTML中的a标签实现点击下载二.即使使用a标签的download属性,chrome浏览器还是会打开三.解决方案解决方案一:使用ajax请 ...
django解决页面跳转问题
django解决页面跳转问题参考文章: (1)django解决页面跳转问题 (2)https://www.cnblogs.com/studong/p/9181524.html 备忘一下.
a标签下载文件，js/jq创建a标签导出Excel文件
a标签下载文件,js/jq 创建a标签导出Excel文件 1.设置dom(html) <button type="button" class="layui-btn ...
js请求返回一个页面html页面跳转页面,JS cookie操作解决页面跳转返回
在HTML中,页面跳转后,js和HTML都会刷新,这样数据就会初始化,如果要解决页面跳转互传数据,可以考虑cookie. 对于页面跳转,然后页面返回等一系列操作,cookie中数据模拟堆栈出栈可以实现 ...
uni中使用select标签后生成APP页面跳转空白
uni中使用select标签后生成APP页面跳转空白最近再用webstrom时,写uni APP时发现一个问题当生成apk后,带有select选择器标签的页面突然无法显示一片空白. 报错显示:Ca ...
a标签点击中文文件名乱码_a 标签下载文件并解决中文乱码问题
/** * 下载文件 * 文件名中不能包含可疑字符 * @return */ public String download() { response = getResponse(); request ...
jsp + servlet 通过a 标签下载文件
在开发项目时遇到,在jsp 中通过 a 标签的方式,访问后台servlet,调用客户端以下载的方式打开文件,遇到中文文件名乱码,找不到问题,导致下载失败问题,弄了很久才弄出点样子,不是 ...

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

使用a标签下载文件，解决页面跳转的问题相关推荐

最新文章

热门文章