Blob - 二進制文件流下載


/**
 * 返回值文件類型為 blob 二進制流文件
 * responseType: 'blob' 
 * params 接口所需參數
 * 命名文件名:依據時間戳命名文件名
 * 	    (導出時需要延遲,否則導出文件失敗,默認文件名時直接導出)
 * */

$axios.get(`api`, {
	responseType: 'blob',
	params
}).then((res) => {
	// response 的返回值為二進制文件流

	// 創建時間戳
	let date = new Date(),
		yyyy = date.getFullYear(),
		MM = date.getMonth() + 1,
		dd = date.getDate(),
		hh = date.getHours(),
		mm = date.getMinutes(),
		ss = date.getSeconds();
	var timeStr = `${yyyy}${MM}${dd}${hh}${mm}${ss}`;

	// 導出二進制文件
	setTimeout(() => {
		// 創建URL對象 URL.createObjectURL(object)
		let url = window.URL.createObjectURL(res.data);
		let link = document.createElement('a');
		link.style.display = 'none';
		link.href = url;
		// 指定文件名&文件類型(后綴名)
		let fileName = `Users${timeStr}CN.xls`;
		/**
		 * 添加屬性,並賦指定的值 el.setAttribute('download','zzz')
		 * demo: <a href="abc.gif" download="zzz"> 
		 * download屬性的值即使當前要導出的文件的文件名
		 * */
		link.setAttribute('download', fileName);
		link.click();
		// 釋放創建的對象(創建的新的URL必須通過該方法釋放)
		window.URL.revokeObjectURL(url);
	}, 500);
}).catch((err) => {
	console.log('文件導出失敗: ', err);
});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM