最近开发项目，根据后端给定的url下载文件。实际开发中，浏览器会打开pdf文件或json文件而不会进行下载。
html5 a标签的download属性，代码中添加了此属性，可并不生效。
download浏览器兼容性
要想download属性生效出了浏览器兼容问题外，还需要符合同源策略。刚好我的项目下载地址跨域了，所以downlaod不生效。
再查找资料后，最简单的办法就是改后台服务器配置。这里我使用了nginx服务器做了测试。
nginx配置如下：l配置nginx的
location遇到.pdf结尾的连接响应头增加Content-Disposition attachment;这后返回头就是告诉浏览器直接下载文件。
server {
# ...
location ~* \.pdf$ {
add_header Content-Disposition attachment;
}
location / {
}
# ...
nginx html文件夹下增加test.html,和test.pdf
<!html>
<head>
</head>
<body>
<ul>
<li><a href="http://127.0.0.1/test.pdf">click me!!local</a></li>
</ul>
</body>
</html>
html目录内容如下
htmlDir.jpg
然后启动nginx,浏览器输入localhost/test.html回车，点击clike me 连接，直接出现下载对话框。注意这里输入的host为localhost,而a标签的连接地址是127.0.0.1，所以即使跨域情况下也可以直接实现下载功能。演示效果如下：
test.html.jpg
网友评论