最近開(kāi)發(fā)項(xiàng)目,根據(jù)后端給定的url下載文件。實(shí)際開(kāi)發(fā)中,瀏覽器會(huì)打開(kāi)pdf文件或json文件而不會(huì)進(jìn)行下載。
html5 a標(biāo)簽的download屬性,代碼中添加了此屬性,可并不生效。

download瀏覽器兼容性
要想download屬性生效出了瀏覽器兼容問(wèn)題外,還需要符合同源策略。剛好我的項(xiàng)目下載地址跨域了,所以downlaod不生效。
再查找資料后,最簡(jiǎn)單的辦法就是改后臺(tái)服務(wù)器配置。這里我使用了nginx服務(wù)器做了測(cè)試。
nginx配置如下:l配置nginx的
location遇到.pdf結(jié)尾的連接響應(yīng)頭增加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 >click me!!local</a></li>
</ul>
</body>
</html>
html目錄內(nèi)容如下

htmlDir.jpg
然后啟動(dòng)nginx,瀏覽器輸入localhost/test.html回車,點(diǎn)擊clike me 連接,直接出現(xiàn)下載對(duì)話框。注意這里輸入的host為localhost,而a標(biāo)簽的連接地址是127.0.0.1,所以即使跨域情況下也可以直接實(shí)現(xiàn)下載功能。演示效果如下:

test.html.jpg