a标签download属性不起作用

首先要明白的是，download属性是HTML5新增的属性，也就是作用在HTML5的基础之上，他可以使a标签的href属性进行下载，如果填写指就会更改你的下载名称，比如：

<a href="/images/a.exe" download>点击下载</a>

上面这段代码会下载a.exe,并采用默认命名

<a href="/images/a.exe" download="b">点击下载</a>

这段代码会将a.exe改名为b.exe下载

需要注意的是，href属性的地址必须是和你前端js非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目，调用后台的接口，这时download就会不起作用。

在这种情况下如果你是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器也会自动下载，但是如果你使用浏览器可以解析的文件，比如.txt,.png....浏览器就会采取预览模式，所以无论如何你都无法直接弹出下载框。如下图所示：

<a href="https://www.baidu.com/a.jpg" download>点击下载</a>

无法正常下载a.jpg，会直接预览

<a href="https://www.baidu.com/a.exe" download>点击下载</a>

正常下载a.exe文件

所以如果真的出现上述情况，那么只有一种办法，提示用户进行手动的右键保存。

提供一种解决方案：给a标签增加点击事件

JS代码如下：

    //下载文件function downloadFile(filenamerel) {var $downForm = $("<form method='get'></form>");$downForm.attr("action", "后台地址");var $input = $("<input type='hidden'>");$input.attr("name","filenamerel");$input.val(filenamerel);$downForm.append($input);$(document.body).append($downForm);//提交表单，实现下载$downForm.submit();}

后台代码实现如下：

    @RequestMapping(value = "路径", method = RequestMethod.GET)public void downloadEdiFile(HttpServletRequest request, HttpServletResponse response) throws IOException {String filenamerel = request.getParameter("filenamerel");String fileName = request.getParameter("filename");//获取文件保存地址String filePath = 文件基础路径 + filenamerel;//读取文件InputStream txtIn = new FileInputStream(new File(filePath));OutputStream os = response.getOutputStream();String userAgent = request.getHeader("user-agent").toLowerCase();if (userAgent.contains("msie") || userAgent.contains("like gecko")) {// win10 ie edge 浏览器 和其他系统的iefileName = URLEncoder.encode(fileName, "UTF-8");} else {// 文件名转码fileName = new String(fileName.getBytes("UTF-8"), "iso-8859-1");}response.setContentType("application/octet-stream; charset=UTF-8");response.setHeader("Content-Disposition", "attachment; filename=" + fileName);// @TODO 下载的文件名称//文件缓存区byte[] bytes = new byte[1024];//判断输入流中的数据是否已经读完的标致int len = 0;while ((len = txtIn.read(bytes)) > 0) {os.write(bytes, 0, len);}if (os!=null){os.close();}if (txtIn!=null){txtIn.close();}}

完成如上阶段即可实现点击下载，如果要重命名，在todo处更改名称即可，也可以从前台传递过来。

ps:如果解决了您的问题请帮忙点赞关注一下哦~

感谢琨璟指正的错误

如果是网络文件利用下面的方法进行

感谢 weixin_42313833 提出的疑问

// 读取文件
InputStream txtIn = new FileInputStream(new File(filePath));=》 将上述代码更改为下面的代码// 从网络读取文件
URL url = new URL(filePath);
URLConnection conn = url.openConnection();InputStream txtIn = conn.getInputStream();

a标签download属性不起作用相关推荐

文件下载 response响应ContentType与a标签download属性
参考资料 MediaType介绍了解HTML/HTML5中的download属性 header中Content-Disposition的作用目录一. ContentType 二. a标签down ...
[html] html5中的meta标签http-equiv属性有什么作用？
[html] html5中的meta标签http-equiv属性有什么作用? http-equiv是http5新增的属性,用于把 content 属性关联到 HTTP 头部,可模拟响应头.例如:con ...
IE浏览器a标签无法下载问题解决（IE浏览器a标签download属性不兼容问题解决）
IE浏览器a标签无法下载问题解决(IE浏览器a标签download属性不兼容问题解决) 参考文章: (1)IE浏览器a标签无法下载问题解决(IE浏览器a标签download属性不兼容问题解决) (2) ...
a标签download属性修改文件名失效
<a href="'+fileurl+'" download="'+filename+'"> fileName为下载文件要修改的名字注意:a标 ...
a标签download属性
download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,download属性为下载后的文件名用法1:下载该本地图片,并默认命名 <a ...
a标签download属性无效_HTML从零开始——链接标签
链接(hyperlink)是互联网的核心.它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起. URL 是链接指向的地址.链接不仅可以指向另一个网页,也可以指向文本.图像.文件等 ...
a标签 download属性不生效，一直还是预览图片BUG
问题描述:前段时间一直想使用前端的a标签实现文件下载,使用的a标签的download属性就能实现.可是FTP服务器的图片还是一直只能预览无法直接下载. #使用的地址是直接使用的IP端口的,原因就出在这 ...
html a标签无效,Html a标签 download属性失效原因
HTML 4.01 与 HTML 5 之间的差异在 HTML5 中,download 属性是标签的新属性. 因此,download 是属于HTML5的新属性,失效原因分析如下: 1.没有声明htm ...
a标签download属性无效_使用这些 CSS 属性选择器来提高前端开发效率
如题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法.通常将 HTML属性放在方括号中,称为属性选择器,如下: ...

a标签download属性不起作用

a标签download属性不起作用

a标签download属性不起作用相关推荐

最新文章

热门文章