在學(xué)習(xí)web前端有不懂的地方或者遇到問(wèn)題可以找我验夯，本人前端已經(jīng)從業(yè)8年魁蒜，有豐富的經(jīng)驗(yàn)操刀，資料筆記烁挟，視頻，需要的歡迎加入我的web前端學(xué)習(xí)群?點(diǎn)擊進(jìn)入1045267283
1骨坑、使用<a>標(biāo)簽
<a href="/user/test/xxxx.txt" download="文件名.txt">點(diǎn)擊下載</a>
這樣當(dāng)用戶(hù)打開(kāi)瀏覽器點(diǎn)擊鏈接的時(shí)候就會(huì)直接下載文件撼嗓。
但是有個(gè)情況柬采，比如txt,png,jpg等這些瀏覽器支持直接打開(kāi)的文件是不會(huì)執(zhí)行下載任務(wù)的，而是會(huì)直接打開(kāi)文件且警，這個(gè)時(shí)候就需要給a標(biāo)簽添加一個(gè)屬性“download”;
實(shí)例如下：
移到標(biāo)簽<a>標(biāo)簽上可以顯示文件路徑粉捻，根據(jù)路徑提示進(jìn)行文件路徑的補(bǔ)全
<!DOCTYPE html>?
<html>?
????<head>?
????????<metacharset="UTF-8">?
????????<title></title>?
????</head>?
????<body>?
????????<ahref="321.png"download="test.png">點(diǎn)擊下載</a>???
????</body>?
</html>
若需從網(wǎng)頁(yè)上傳的圖片中進(jìn)行下載，可能會(huì)用到以下方法：
獲取主機(jī)域名：
location.hostname
獲取端口號(hào)：
location.port
2斑芜、使用按鈕進(jìn)行監(jiān)聽(tīng)
按鈕監(jiān)聽(tīng)又可以分為兩種方法肩刃，
一是window.open()
var$eleBtn1 = $("#btn1");?
????????var$eleBtn2 = $("#btn2");?
????????//已知一個(gè)下載文件的后端接口：https://codeload.github.com/douban/douban-client/legacy.zip/master?
????????//方法一：window.open()?
????????$eleBtn1.click(function(){?
????????????window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");?
????????});
二是表單提交
//方法二：通過(guò)form?
????????$eleBtn2.click(function(){?
????????????var$eleForm = $("<form method='get'></form>");?
????????????$eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");?
????????????$(document.body).append($eleForm);?
????????????//提交表單，實(shí)現(xiàn)下載?
????????????$eleForm.submit();?
????????});
以上就是html實(shí)現(xiàn)點(diǎn)擊直接下載文件的詳細(xì)內(nèi)容杏头，
相關(guān)內(nèi)容鏈接希望能幫助大家盈包！
在此小編再次感謝大家對(duì)我的支持，需要更多相關(guān)資料醇王，視頻請(qǐng)加群點(diǎn)擊進(jìn)入1045267283
