最近開(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
