首頁 > html教程 > HTML熱點 閱讀:0更新時間:2020-12-20 09:49:27

JS實現html頁面點擊下載文件(共兩種實現方法)

1.使用標簽來完成

點擊下載

這樣當用戶打開瀏覽器點擊鏈接的時候就會直接下載文件。

但是有個情況,比如txt,png,jpg等這些瀏覽器支持直接打開的文件是不會執行下載任務的,而是會直接打開文件,這個時候就需要給a標簽添加一個屬性“download”;

以下為例子

html>

	
		
		
	
	
		 點擊下載
	
国产亚洲欧美日韩


其中download后面的屬性是下載后文件的文件名字

如果url指向同源資源,是正常的。

如果url指向第三方資源,download會失效,表現和不使用download時一致——瀏覽器能打開的文件,瀏覽器會直接打開,不能打開的文件,會直接下載。瀏覽器打開的文件,可以手動下載。

解決方案一:將文件打包為.zip/.rar等瀏覽器不能打開的文件下載。

解決方案二:通過后端轉發,后端請求第三方資源,返回給前端,前端使用file-saver等工具保存文件。

2.使用按鈕進行監聽

按鈕監聽又可以分為兩種方法,

一是window.open()

var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2");
//已知一個下載文件的后端接口: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");
});

二是表單提交

//方法二:通過form
$eleBtn2.click(function(){
    var $eleForm = $("
"); $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master"); $(document.body).append($eleForm); //提交表單,實現下載 $eleForm.submit(); });

beylze編程學院,一個分享編程知識和seo優化知識的網站。跟著beylze一起學習,每天都有進步。

通俗易懂,深入淺出,一篇文章只講一個知識點。

文章不深奧,不需要鉆研,在公交、在地鐵、在廁所都可以閱讀,隨時隨地漲姿勢。

文章不涉及代碼,不燒腦細胞,人人都可以學習。

當你決定關注beylze(公眾號:beylze),你已然超越了90%的其他從業者!

相關文章

優秀教程