眾所周知，javascript 是前端開發(fā)中不可或缺的一部分。除了用它來實現(xiàn)動態(tài)效果和數(shù)據(jù)交互，我們還可以用它來實現(xiàn)文件下載。本文將介紹幾種常見的 javascript 下載代碼方式，并附上相應(yīng)的示例。

1. 通過創(chuàng)建 a 標(biāo)簽實現(xiàn)下載

這種方式比較簡單，就是在 JS 中創(chuàng)建一個 a 標(biāo)簽，然后設(shè)置它的 href 屬性為要下載的文件的鏈接，再通過模擬鼠標(biāo)單擊來觸發(fā)下載即可。

function downloadFile(url) {
var link = document.createElement('a');
link.href = url;
link.download = true;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

上面的代碼中，我們創(chuàng)建了一個 a 標(biāo)簽，并設(shè)置了它的 href 屬性為要下載的文件的鏈接，注意要設(shè)置 download 屬性，否則瀏覽器可能會打開文件而不是下載。然后我們把這個 a 標(biāo)簽添加到頁面上，模擬鼠標(biāo)單擊操作，完成下載后再把它從頁面上移除。

2. 通過 XMLHttpRequest 實現(xiàn)下載

另一種下載文件的方式是使用 XMLHttpRequest 對象，這種方式可以支持處理下載進(jìn)度、錯誤處理和可取消下載等功能。

function downloadFile(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
var blob = xhr.response;
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = true;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
xhr.send();
}

上面的代碼中，我們對 XMLHttpRequest 對象的屬性進(jìn)行了一些設(shè)置，如 responseType 設(shè)置為 'blob'，表示返回二進(jìn)制數(shù)據(jù)，而 onload 事件處理函數(shù)中，我們檢查狀態(tài)碼是否為 200，然后創(chuàng)建 a 標(biāo)簽，并設(shè)置它的 href 屬性為 Blob 對象地址，再模擬鼠標(biāo)單擊操作，最后移除 a 標(biāo)簽。

3. 通過 FileSaver.js 實現(xiàn)下載

FileSaver.js 是一個專門為文件保存而設(shè)計的 JavaScript 庫，它可以幫助我們實現(xiàn)文件下載、文件名指定、數(shù)據(jù)轉(zhuǎn)換和編碼等一系列復(fù)雜的操作。

function downloadFile(filename, data) {
var blob = new Blob([data]);
saveAs(blob, filename);
}

上面的代碼中，我們通過 new Blob([data]) 創(chuàng)建了一個 Blob 對象，再調(diào)用 saveAs() 方法保存文件，其中 filename 參數(shù)表示要保存的文件名，data 參數(shù)表示要保存的數(shù)據(jù)。

以上就是三種常見的 javascript 下載代碼方式，根據(jù)實際需求選擇相應(yīng)的方式即可。