1.下載方法是通過創(chuàng)建 Blob 對象，并使用 URL.createObjectURL 來生成下載鏈接，最終通過創(chuàng)建 <a> 元素并觸發(fā)點擊實現(xiàn)文件下載。
獲取到 HTTP 響應(yīng)后，以下是對每一行代碼的解釋：
-
if (res.status === 200) {: 這一行代碼檢查 HTTP 響應(yīng)的狀態(tài)是否為 200，表示請求成功。只有在成功的情況下才會執(zhí)行后續(xù)的文件下載操作。 -
const blob = new Blob([res.data]);: 使用響應(yīng)中的數(shù)據(jù)創(chuàng)建一個Blob對象。Blob是二進(jìn)制大對象，用于表示二進(jìn)制數(shù)據(jù)。 -
const downloadElement = document.createElement('a');: 創(chuàng)建一個<a>元素，用于設(shè)置下載鏈接。 -
const href = window.URL.createObjectURL(blob);: 使用URL.createObjectURL創(chuàng)建一個包含Blob對象的 URL。這個 URL 將在后續(xù)用于文件下載。 -
downloadElement.href = href;: 將剛才創(chuàng)建的 URL 設(shè)置為<a>元素的href屬性，以便關(guān)聯(lián)下載鏈接。 -
downloadElement.download = item.fileName;: 設(shè)置下載時的文件名。item.fileName是文件的名稱，會在下載時使用。 -
document.body.appendChild(downloadElement);: 將<a>元素添加到文檔的body中。這是為了觸發(fā)下載，因為瀏覽器需要在文檔中存在的元素上進(jìn)行點擊事件。 -
downloadElement.click();: 模擬點擊<a>元素，觸發(fā)文件下載。 -
document.body.removeChild(downloadElement);: 文件下載完成后，將<a>元素從文檔中移除。這一步是為了清理文檔結(jié)構(gòu)，避免對頁面產(chǎn)生影響。 -
window.URL.revokeObjectURL(href);: 釋放之前創(chuàng)建的Blob對象的 URL。這是為了釋放瀏覽器資源，防止內(nèi)存泄漏。文章來源：http://www.zghlxwxcb.cn/news/detail-801799.html
這一系列操作實現(xiàn)了通過瀏覽器觸發(fā)文件下載的過程。要注意，這種方式適用于現(xiàn)代瀏覽器，但在一些舊版本的瀏覽器中可能存在兼容性問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-801799.html
downloadFile(item) {
const headers = {
Authorization: `Bearer ${getToken()}`,
};
Axios({
method: 'GET',
url: `${webAPI.services.landmis}file/download`,
params: { id: item.id },
responseType: 'blob',
headers,
}).then((res) => {
// 請求成功后處理流
if (res.status === 200) {
const blob = new Blob([res.data]);
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 創(chuàng)建下載的鏈接
downloadElement.href = href;
downloadElement.download = item.fileName; // 下載后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); // 點擊下載
document.body.removeChild(downloadElement); // 下載完成移除元素
window.URL.revokeObjectURL(href); // 釋放掉blob對象
}
});
},到了這里，關(guān)于vue：文件下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
