vue中blob文件下載及其它下載方式

一、Blob對象的了解

　　1：blob表示一個不可變、原始數據的類文件對象。Blob()構造函數返回一個新的blob對象；blob對象的內容由參數給出的值串聯組成；

　　2：new Blob(array, options):   

　　　　array：是一個由ArrayBuffer、Blob和DOMSting等對象構成的Array，它將會被放在Blob；

　　　　options：對象中有兩個參數： type：默認為""，表示將會被放入到blob中數組內容的MIME類型；endings：用於指定包含行結束符的字符串如何被寫入；

二、URL api以及 URL.createObjectURL()

　　1：URL接口是用於解析、構造，規范化和編碼的URLs；

　　2：new URL() 創建並返回一個URL()對象，該URL對象引用使用絕對URL字符串，相對URL字符串和基本URL字符串指定的URL；

　　3：屬性： hash、host、hostname、href、search等

　　4：靜態方法：

　　　　 createObjecURL() ：返回一個DOMSting，包含一個唯一的blob鏈接，這個url的生命周期和創建它的窗口document綁定

　　　　revokeObjectURL()：銷毀之前使用createObjectURL創建的url

三、接收並下載文件流（blob對象）

// 1、接收服務器返回數據時，需設置
responseType: 'blob'// 2、創建一個臨時的url指向blob對象
var blob = new Blob(array, options)
var url = URL.createObjectURL(blob)

// 3、創建之后可以模擬一系列的操作
var a = documen.createElement('a')

a.href = url // 給a標簽賦上下載地址

a.style.display = 'none' // 讓a標簽不顯示
document.body.appendChild('a') // 將a標簽append到文本中
a.click()  // a標簽自點擊

// 4、釋放這個臨時的對象URL
URL.revokeObjectURL(blob)

 # 下方圖片是自己項目中使用的方法 - 僅供參考

 

四、通過iframe方式下載

<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">導出</el-button>
// method方法：
handleExport(row) {
   var elemIF = document.createElement('iframe')
   elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                    '&category=' + row.category 
   elemIF.style.display = 'none'
   document.body.appendChild(elemIF)
}

 # iframe：內聯框架，就是在本頁面顯示其他頁面內容的功能；若感興趣了解： https://www.w3school.com.cn/tags/tag_iframe.asp

總結：js下載文件的兩種方式

　　1：如果服務器的靜態目錄下有靜態資源，后台人員給你文件路徑，就可以通過window.location.href方式獲取

　　2：如果服務器沒有靜態資源，后台會返回一個文件流，接收到將文件寫入內存中，並且創建一個a標簽，a鏈接的href屬性指向內存中的文件，download屬性指向文件名，模擬a標簽的點擊事件，然后進行下載