前端通過 post 下載檔案

又在寫bug發表於2018-11-09
前端

兩種通用方法

  • window.open
  • 利用 blob 下載

什麼是 blob ?

Blob，Binary Large Object的縮寫，代表二進位制型別的大物件。Blob的概念在一些資料庫中有使用到，例如，MYSQL中的BLOB型別就表示二進位制資料的容器。在Web中，Blob型別的物件表示不可變的類似檔案物件的原始資料，通俗點說，就是Blob物件是二進位制資料，但它是類似檔案物件的二進位制資料，因此可以像操作File物件一樣操作Blob物件，實際上，File繼承自Blob。

結合請求去用

服務端返回這種流檔案格式

前端通過 post 下載檔案
其實這個可能是一個 表格的檔案流，如果用post 下載如何去下載呢？ 廢話不多說直接上程式碼：

fetch('Excel.do',{
			method: 'post',
			headers: {
				'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
				'Content-Type' : 'application/x-www-form-urlencoded'
			},
			'credentials': 'include',
			body: Serialize(this.getSearchParam()).substr(1)
		})
		.then(res => res.blob())
	    .then(blob => {
	        console.log(blob)
	        var a = document.createElement('a');
	        var url = window.URL.createObjectURL(blob);
	        var filename = time+'createUserSkuExcel.xls';
	        a.href = url;
	        a.download = filename;
	        a.click();
	        window.URL.revokeObjectURL(url);
	    })
複製程式碼

注意事項

  • 一定要知道檔名字
  • 相容性目前只支援現代瀏覽器

相關文章