使用 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 嚴重依賴它們。
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn