vue中blob文件下载及其它下载方式
阅读原文时间:2023年07月09日阅读:3

一、Blob对象的了解

  1:blob表示一个不可变、原始数据的类文件对象。Blob()构造函数返回一个新的blob对象;blob对象的内容由参数给出的值串联组成;

  2:new Blob(array, options):

    array:是一个由ArrayBufferBlob和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方式下载

@click="handleExport(scope.row)">导出
// 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标签的点击事件,然后进行下载