HOWTO · JavaScript
使用 JavaScript 下載檔案
本教程講授如何使用 JavaScript 下載檔案
本頁內容
在本文中，我們將學習如何使用 JavaScript 下載檔案。自動下載檔案可幫助我們使用 JavaScript 函式直接從 URL 檢索檔案，而無需聯絡任何伺服器。我們將使用自定義的編寫函式並使用 HTML 5 的下載屬性來實現此目的。
使用 HTML 中的 download 屬性下載檔案
當使用者單擊超連結時，HTML 5 中的 download 屬性用於下載檔案。它與錨標籤-<a> 和 <area> 一起使用。我們需要設定 href 屬性，以指定檔案的來源。download 屬性的值確定下載檔案的名稱。如果刪除此值，則下載的檔名將與原始檔名相同。
<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
在上面的程式碼中，我們使用 download 屬性下載影象 apple.png。我們首先建立包含影象地址的錨標籤，然後向其新增 download 屬性。然後，我們還建立了一個下載按鈕，以方便下載檔案。
在 JavaScript 中使用自定義函式建立和下載文字檔案
這種方法將動態建立文字資料，然後使用 JavaScript 建立文字檔案然後下載。
下載演算法
-
建立一個文字區域以輸入文字資料。
-
使用
createElement屬性建立錨標籤<a>，併為其分配download和href屬性。 -
使用
encodeURIComponent編碼文字並將其附加到 URI 作為其組成部分。這將幫助我們用轉義序列的組合替換某些特殊字元。 -
將日期型別設定為
text/plain，並使用data:text/plain; charset = utf-8作為href的屬性值。 -
將此建立的元素追加到文件（HTML 頁面）的正文中。
-
使用
element.click()模擬滑鼠單擊。 -
從文件正文（HTML 頁面）中刪除元素。
附加事件偵聽器，以查詢單擊下載按鈕的過程。使用文字區域中的文字和文字檔案的檔名作為引數來呼叫下載功能。
<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
使用 Axios 庫下載檔案
在這種方法中，我們將使用 Axios 庫下載檔案。在繼續介紹該方法的詳細資訊之前，讓我們瞭解什麼是 Blob，這是用於使用 Axios 下載檔案的資料型別。
Blob
Blob 代表 Binary Large Object，是一種可以儲存二進位制資料的資料型別。它表示程式、程式碼片段、多媒體物件之類的資料，以及不支援 JavaScript 本機格式的其他內容。
下載檔案
-
建立一個 Axios
get請求，其中 URL 為檔案源，而responseType為blob。 -
通過執行以下步驟來解決 Axios 請求返回的承諾：
- 建立一個包含代表 Blob 物件的 URL 的 DOMString。
- 使用
createElement屬性建立錨標籤<a>，併為其分配download和href屬性。 - 將
href設定為第一步中建立的 URL，將download屬性設定為下載檔案的名稱。 - 將此連結附加到文件，並使用
.click()方法模擬點選。 - 從文件中刪除此連結。
<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
在這裡，我們從一個網站獲得隨機的圖片，使用 Axios 來請求這些圖片的 blob 形式，然後使用錨標籤的 download 屬性下載它們。與以前的方法一樣，此方法不限於使用者輸入的純文字。我們可以從 API 請求任何種類的資料，然後使用這種方法將資料儲存在計算機內部。
除使用 Axios 庫的方法外，所有主流瀏覽器均支援上述所有方法。Internet Explorer 仍然不支援本機 ES6 承諾，而 Axios 嚴重依賴它們。
