a标签download属性不起作用

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 浏览器 和其他系统的ie
            fileName = 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();