溫馨提示×

js實現文件流式下載文件方法詳解及完整代碼

js
小云
652
2023-08-09 12:24:54
欄目: 編程語言

實現文件流式下載文件的方法主要有兩種：使用Blob對象和使用流式傳輸。
方法一：使用Blob對象
首先，我們需要將文件數據轉換成Blob對象，然后使用URL.createObjectURL()方法創(chuàng)建URL，將該URL賦值給下載鏈接的href屬性，接著使用a標簽的click()方法觸發(fā)下載操作。
完整代碼如下：

function downloadFile(filename, data) {
var blob = new Blob([data]);
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}

使用示例：

var filename = 'example.txt';
var data = 'This is some example text.';
downloadFile(filename, data);

方法二：使用流式傳輸
首先，我們需要創(chuàng)建一個Blob對象，然后使用XMLHttpRequest對象發(fā)送GET請求，設置responseType為"blob"，接著在load事件中獲取服務器返回的Blob對象，接下來使用a標簽的download屬性設置文件名，將Blob對象賦值給下載鏈接的href屬性，最后使用a標簽的click()方法觸發(fā)下載操作。
完整代碼如下：

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

使用示例：

var url = 'http://example.com/example.txt';
var filename = 'example.txt';
downloadFile(url, filename);

以上兩種方法都可以實現文件流式下載文件，具體選擇哪種方法取決于你的需求和環(huán)境。

0 踩