通过a便签链接直接下载文件（可跨越）

最近开发项目，根据后端给定的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

        
        
        
                

                        
click me!!local
                
        

html目录内容如下

htmlDir.jpg

然后启动nginx,浏览器输入localhost/test.html回车，点击clike me 连接，直接出现下载对话框。注意这里输入的host为localhost,而a标签的连接地址是127.0.0.1，所以即使跨域情况下也可以直接实现下载功能。演示效果如下：

test.html.jpg