色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue文件流下載

錢浩然1年前7瀏覽0評論

文件下載功能是Web開發中經常需要實現的一個功能,通過前端頁面向后端請求,將服務器中的文件下載到本地電腦中。Vue作為一款流行的前端框架,在文件下載方面也擁有著非常優秀的處理能力。Vue文件流下載的實現方法非常簡單,只需要使用Vue的axios庫就可以輕松地實現。

Vue的axios庫是一個基于Promise的HTTP庫,可用于瀏覽器和node.js中,同樣也支持攔截請求和響應、轉換JSON數據等一系列有用的功能。在Vue中使用axios庫進行文件流下載,需要按照以下步驟進行操作:

//導入axios庫
import axios from 'axios';
//定義一個文件流下載函數
function downloadFile(url) {
axios({
method: 'get',
url: url,
responseType: 'blob' //返回類型blob
})
.then((res) =>{
const content = res.data;
const fileName = res.headers['content-disposition'].split(';')[1].split('=')[1].replace(/"/g, '');
const blob = new Blob([content]);
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
})
.catch((error) =>{
console.log(error);
});
}
//調用文件流下載函數
downloadFile('http://localhost:8080/file/test.xlsx');

在上述代碼中,我們定義了一個名為downloadFile的函數,該函數接受一個文件下載鏈接作為參數。通過axios庫,我們發送一個get請求,指定返回類型為blob二進制數據,獲取到服務器上的文件內容后,將其轉換成Blob類型,并使用JavaScript內置的Blob構造器創建一個Blob對象。然后,我們使用屬性URL.createObjectURL()生成一個下載鏈接并賦值給link的href屬性,以便下載文件。最后,我們創建了一個a元素,并觸發click事件來實現文件下載。

需要注意的是,服務器返回的文件名需要通過content-disposition響應頭獲取。因此,在上述代碼中,我們使用了res.headers[‘content-disposition’]獲取到完整的響應頭信息,并使用split()方法提取文件名后進行下載。

總的來說,Vue文件流下載功能非常容易實現,只需要借助axios庫,就可以輕松地將服務器上的文件下載到本地電腦中。不過,在實現文件流下載時,需要注意服務器返回的文件類型和文件名,確保文件下載成功。