一、a標籤download屬性
a標籤download屬性是一個HTML5新增的屬性，可以讓用戶在點擊鏈接時下載所鏈接的資源，而不是在瀏覽器中打開它。然而，有些情況下，a標籤download屬性會失效，這個問題在很多場景下都會遇到。
二、a標籤的download屬性僅適用於
a標籤download屬性僅適用於同域（同源）的資源，如果要下載跨域資源，則需要使用伺服器端腳本來處理。
例如：
Download PDF Download PDF
在這兩個鏈接中，第一個是有效的，因為它下載的是同域下的資源。第二個鏈接會失敗，因為它嘗試下載跨域資源。
三、a標籤中的download屬性
a標籤中的download屬性只對超鏈接生效，對於通過JavaScript創建的Blob URL或者data URL是不起作用的。這種情況下，我們可以使用JavaScript來模擬下載行為。
例如：
const downloadFile = (blob, fileName) => {
const link = document.createElement("a");
link.href = window.URL.createObjectURL(new Blob([blob], { type: "application/octet-stream" }));
link.download = fileName;
link.click();
};
這個函數接收兩個參數：要下載的數據blob和文件名fileName。它創建了一個臨時的鏈接，並為其設置了對象URL作為鏈接的href屬性。然後將文件名設置為download屬性，以便瀏覽器自動啟動下載。
四、a標籤download屬性只能同源
同源策略是瀏覽器的安全策略，它要求JavaScript只能與同域頁面進行交互。同樣的，download屬性只適用於同源資源。如果需要下載跨域資源，我們可以使用伺服器端腳本或者CORS策略來處理。
五、設置width屬性對什麼標籤無效
設置width屬性對於a標籤是無效的。width屬性只適用於圖像、表格和表單元素。
總結
a標籤download屬性可以讓用戶輕鬆地下載鏈接資源，但是在某些情況下會失效。對於這種情況，我們需要使用JavaScript來模擬下載行為或者在伺服器端進行處理。同時，我們要注意a標籤download屬性只適用於同源資源，並且設置width屬性對於a標籤是無效的。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/184863.html
微信掃一掃 
支付寶掃一掃 