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标签的点击事件，然后进行下载